-webkit-user-select:none
モバイル Web ページのレイアウト エクスペリエンス summary_html/css_WEB-ITnose
はじめに
ご存知のとおり、今日のモバイル インターネットの普及により、基本的にすべての若者が携帯電話を使用して Web サイトの情報を閲覧したり、携帯電話を使用してショッピング サイトで商品の支払いをしたことがありますが、そのような Web ページがどのように変更されるかについて考えたことはありますか?今日はこの問題について説明します
読者は基本的な知識を持っている必要があります
1. HTML と CSS の使用に習熟していること
2. HTML5 と CSS3 を深く理解している必要はありません
3.および jquery スクリプト言語
上記の基本的な知識がない場合は、オンラインで他の関連する教育投稿を探すことをお勧めします。そうしないと、次の学習についていけない可能性があります
HTML の特殊な使用法
まず、HTML の特殊な構文について説明します。HTML を初めて使用する方はこれまで見たことがないかもしれませんが、専門家の方はこのモジュールをスキップしてください
次に、この図から始めましょう:
この写真は皆さんもご存知かと思いますが、これは淘宝網のタイトルバーです。ここで非常に目を引くのがこのアイコンです。これがどのように作られているかご存知ですか?
まず、淘宝網のロゴアイコンを準備する必要があります。これは、Baidu のダウンロード アドレスから直接ダウンロードできます
ダウンロードが完了したら、画像の形式を ico 形式に変換する必要があります。変換ツールをオンラインで使用します。アドレス
が生成されたら、画像をダウンロードし、名前を taabaoLogo に変更して、新しい HTML プロジェクトを作成します。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" ></head><body> </body></html>
操作の結果は次のとおりです。
この例から、この効果はステートメントに基づいて達成できることがわかりますが、実際の使用では、別のステートメントを追加する必要があります。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > <link rel="icon" style="image/x-icon" href="taobaoLogo.ico"></head><body> </body></html>
ここで、注意深い読者は、効果は同じであるため、なぜわざわざこれを行う必要があるのかを尋ねるかもしれません。詳細については、この記事を参照してください。したがって、ここで冗長にする必要はありません
一般的に、このロゴは。アイコンはタイトルに使用するだけでなく、配置することもできます お気に入りに使用するには、追加されたタイトルバーの rel="短いアイコン" を rel="ブックマーク" に変更するだけです
<link rel="bookmark" style="image/x-icon" href="taobaoLogo.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!--开启对web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /><!--主要是正对苹果手机将数字自动识别为号码--> <meta name="format-detection" content="telephone=no" />
<!-- 忽略识别邮箱，主要是针对安卓手机会自动将符合邮箱格式的字符串识别为邮箱地址--><meta content="email=no" name="format-detection" /><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /><!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC强制全屏 --><meta name="full-screen" content="yes"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC应用模式 --><meta name="browsermode" content="application"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no">
window.scrollY window.scrollX
ログイン後にコピー
デスクトップ ブラウザでは、スクロール バーの値は document.scrollTop と document.scrollLeft を通じて取得されますが、iOS では次のことがわかります。これら 2 つのプロパティが定義されていないのはなぜですか? iOS にはスクロール バーの概念がないため、Android では通常、これら 2 つのプロパティを通じてスクロール バーの値を取得できます。では、iOS ではどのようにスクロール バーの値を取得するのでしょうか。上記の2つの属性ですが、Androidでもこの属性をサポートしていることが判明したので、単純にwoindow.scrollを使用しますwindow.scrollY window.scrollX
ユーザーによるテキストの選択を禁止します
-webkit-user-select:none
ログイン後にコピー
この属性は、ユーザーによるテキストの選択を禁止しており、AndroidとAndroidの両方で有効ですApple-webkit-user-select:none
ボックスサイジングについて簡単に説明しましょう
この属性は CSS3 で新たに追加されたものなので、皆さんには馴染みがないかもしれませんが、通常では実現するのが難しい効果を実現するために設定されています
。例: モバイル レイアウトの場合、通常、Web ページを適応的に処理するためにパーセンテージを使用します。これをアダプティブ レイアウトと呼びます。効果を左右に 1 ピクセルずつインデントしたい場合があります。自動 レイアウトに適応すると画面が引き伸ばされ、結果として水平スクロール バーが表示されます。これはモバイル Web ページを開発する場合にはタブーであるため、現時点ではボックス サイズ設定によって問題が解決されます。具体的な文法の詳細については、http: / /www.w3school.com.cn/cssref/pr_box-sizing.asp
box-sizing 属性から、box に関連する別の属性を考えます。それが box-shadow です
box-shadow
これは属性ですがモバイル Web ページではあまり一般的ではありませんが、モバイル Web ページでは比較的一般的ですが、この機能が導入されてから、Wangmen は特定の要素を作成できるようになりました。 Web ページをより 3 次元化し、以前は実現できなかった効果を実現します。詳細については、http://www.w3school.com.cn/cssref/pr_box-shadow の代わりに、ASP
base64 でエンコードされた画像を参照してください。 URL 画像
Web ページの読み込み時にすべての画像に HTTP リソース リクエストが必要なため、画像は 1 回のリクエストのトラフィックを削減するためにエンコードされ、それによって Web サイトの読み込み速度が向上します。これはオンライン コーディングを使用して実現できます。ツール、アドレス:
http://www.fishlee.net/Tools/GetImageBase64Code#codeResult
手机拍照和上传图片
在HTML5中支持一些移动的新特性
移动端特殊的事件
在HTML5出现之后，有一些新的事件
- touchstart //当手指接触屏幕时触发
- touchmove //当已经接触屏幕的手指开始移动后触发
- touchend //当手指离开屏幕时触发
- touchcancel//当某种touch事件非正常结束时触发
执行事件的顺序：touchstart>touchmove>touchend>touchcanel>click
从上面的顺序我们不难分析出：在点击的时候，click会发生延迟，这样的延迟一般是300ms。
手机图片和视频上传
<!-- 选择照片 --><input type=file accept="image/*"><!-- 选择视频 --><input type=file accept="video/*">
移动端不同的input对应不同的键盘
ios —- android
type email
type url
type search
动画特效开启加速
默认的移动浏览器是不会开启动画效果硬件加速的，但是这样的效果在低端的安卓手机中可能会出现意想不到的反效果
动画加速可以采用，下列代码
.div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */}设置placeholder时候 focus时候文字没有隐藏
input:focus::-webkit-input-placeholder{ opacity: 0;}android局部滚动时隐藏原生滚动条
::-webkit-scrollbar{ opacity: 0;}除此之外，还有像HTML5 中的API和重力感应事件等等的新特性的加入，使得HTML5网页的开发变得越发的多功能性，但是这些在今天的布局上局不讲了，以后还会继续讨论下去
布局方法
在手机网页开发中，由于是基于webkit引擎开发的，所以我们可以大量的使用HTML5特性进行开发，布局上为了达到适屏的效果，我们需要进行采用的一般是百分比的布局，但是也是有一些布局较为特殊，这个我们就不讨论了，后续会有一篇讲解布局实例的文章，敬请期待
特别说明如需转载请注明出处，同时如果你觉得赞，请为我点一下“推荐”，你的鼓励是我前进的动力
参考文献
Meta 标签与搜索引擎优化
移动web问题小结
用CSS开启硬件加速来提高网站性能
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7470
15
1377
52
77
11
19
29
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
