移動基地終了
ブラウザのステータス1.
現在の携帯電話のブラウザが対応携帯エンド主流のブラウザ上でのWebkitカーネルの変更に基づいており、Webkitのブラウザが処理することができます。
2.携帯電話の画面の状態
、モバイルエンドデバイスの画面サイズが非常に大きく、深刻な断片化です。
これらの解像度に注意を払うことなく、開発者として、我々は、ユニットのサイズを使用しているためピクセルです。
3.携帯端末をデバッグする方法
- クロームデベロッパーツール（Google Chromeの）アナログ電話のデバッグ
- LAN、携帯電話を介してサーバーにアクセス内のローカルWebサーバ、モバイル、サーバーアップ
- 外部のネットワークサーバ、直接IPまたはドメイン名を使用します
第二に、ビューポート
视口（viewport）就是浏览器显示页面内容的屏幕区域。
视口可以分为布局视口、视觉视口和理想视口
1.レイアウトビューポートレイアウトビューポート
ページの早期PC側の問題に対処するためのレイアウトビューポートまでのデフォルトセットすることにより、一般的なモバイルデバイスのブラウザは、携帯電話に表示されます。iOS版は、Androidの基本的なビューポートの解像度はそれほどほとんどのPC上のページの電話で提示することができますが、要素は小さいようで、一般的なデフォルトは手動でページをズームすることができ、980pxに設定されていることになります。
2.視覚的なビューポートのビジュアルビューポートは
、文字通り、それはユーザーがサイトを見ている領域です。注：サイトの面積があります。
私たちは、視覚的なビューポートを動作させるためにズームすることができますが、レイアウトビューポートには影響しません、元の幅のレイアウトビューポートが残ります。
ビューポートの理想的なビューポートの上に3
、移動端末が最適なサイトの閲覧を持って読んで幅が設定されていることを確認するために
ビューポート上で、設備の面で、ビューポートを手動Tianxieメタビューポートラベル、予告の理想的なサイズがありますブラウザ操作。
ビューポートメタタグの主な目的：レイアウトビューポートの幅がどのように広い機器、我々はレイアウトビューポートの広い理解することは簡単なビューポートの理想の幅は、一致する必要があります。
4.メタビューポートラベル
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
| プロパティ | 説明 |
|---|---|
| 幅 | ビューポートの幅の幅は、それが特別なデバイス幅値を設けてもよいし、設けられています。 |
| 初期の規模 | 0よりも初期のズーム比の大きいです |
| 最大規模 | 0よりも最大ズーム比、数より大きい |
| 最小規模 | 0より最小ズーム比の大きいです |
| ユーザースケーラブル | ユーザーがズームすることができるかどうか、yesまたはno（1または0） |
標準設定ビューポート
- ビューポートとと一致装置
- デフォルトのビューポートのスケーリング1.0
- ユーザーズームを許可しません
- 最大許容スケーリング1.0
- 最小は1.0スケーリング許可しました
第三に、二度マップ
ピクセルより1.物理的＆物理的なピクセル
-
最小の粒子の物理的なピクセル画面表示を指し、それは物理的に本当です。
-
我々は、物理的なピクセルのPC側のページに等しく必ずしも時間1ピクセルを開発、画素PXは、物理的に同じであるが、同じ移動端末は、物理と呼ばれる、物理的PXの画素数を表示することができません画素比率又はスクリーンピクセル比。
例：アップル物理的画素ビット6が2.0である、すなわち1ピクセル電話機の2つの物理的なピクセルを表示することができます。 -
PC側と以前電話スクリーン/一般的な携帯電話の画面：1CSS物理ピクセル= 1つのピクセル。
-
網膜（網膜画面）が表示され、画面のどこに物理ピクセルを圧縮するより高い解像度を達成するために、詳細度を向上させるディスプレイ技術です。
図2倍
画像は50pxのため*は50px、電話が開か網膜画面であり、倍率は、以前の物理的画素に続く、これは、ぼやけた画像の原因となり
、標準のビューポート設定で画質を向上させるために二重のグラフを使用すること、決意は、高精細機器に曖昧。
再び、拡大縮小するための最初の画像は、デバイスピクチャ曖昧に溶解しました
<style>
/* 我们需要一个50*50像素（css像素）的图片 直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊 */
/* 我们采取的是 放一个 100* 100 图片 然后手动的把这个图片 缩小为 50* 50 （css像素） */
/* 我们准备的图片 比我们实际需要的大小 大2倍，这就方式就是 2倍图 */
img:nth-child(2) {
width: 50px;
height: 50px;
}
</style>
<body>
<!-- 模糊的 -->
<img src="images/apple50.jpg" alt="">
<!-- 我们采取2倍图 -->
<img src="images/apple100.jpg" alt="">
</body>
3.背景サイズスケーリング背景
背景画像の所定サイズのバックグラウンド・サイズ属性
background-size: 背景图片宽度 背景图片高度;
単位：長さ|割合|表紙|含まれています。
カバーは背景画像が完全に背景領域ように背景画像をカバーするために十分な大きさであることを拡大しました。
完全コンテンツ領域を適合するように最大画像サイズ、幅及び高さを含むように拡張
第四に、携帯端末の選択の開発
移動端末（メイン）別のページを作成1.
通常は、URLのドメインプラスM（移動）移動終了の前に開放することができます。モバイルデバイスが開かれている場合、デバイスを決定することにより、可動端ジャンプページ。
- 流体レイアウト（レイアウト割合）
- フレックス弾性レイアウト（推奨）
- 少ない+ REM +メディアクエリのレイアウト
- ハイブリッドレイアウト
2.ページ互換性のある携帯端末応答
の変化へのパターンが異なる端末、欠点に適応するために、画面の幅によって決定さ：生産上の問題、互換性の問題を調整するために多大な労力を必要とします。
- 報道関係お問い合わせ先
- bootstarp
第五に、モバイルエンド技術ソリューション
クライアントのブラウザに移動1.
基本的なWebKitのコアへのモバイルクライアントのブラウザを、それゆえ我々はWebKitの互換性の問題を検討します。
私たちは、H5タグを使用するとCSS3スタイルので安心することができます。同時に民間プレフィックス私たちのブラウザでは、我々は唯一のWebKitを追加することを検討する必要があります。
2. CSSの初期化normalize.css
携帯端末CSSの初期化はnormalize.css /推奨
貴重なデフォルト保護：Normalize.cssは、
バグを修正ブラウザ：Normalize.css
Normalize.css：モジュラー
Normalize.cssを：これは、詳細なドキュメントがある
3 CSS3ボックスモデルボックスサイジングを
- 伝統的なモード幅計算：ボックス= CSSセット幅+ボーダー+パディング、パディングとボーダーの幅は、
ボックスをストレッチしません。 - CSS3ボックスモデル：ボックスの幅=ボーダーとパディングを含ん幅幅CSSのセットが
、CSS3、パディングとボーダーでの私たちのボックスモデルは、大きな箱をサポートしていないと言うことです。
/*CSS3盒子模型,默认*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
4.特別なスタイル
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
V.フローアレンジメント
- また、非固定画素レイアウトとして知られているフローレイアウト、レイアウトの割合。
- 画面伸縮の幅の割合であることがボックスの幅で設定された、画素が限界に固定されておらず、コンテンツが両側に充填されています。
- より一般的なレイアウトを使用して、フローレイアウトモードモバイルWeb開発。
/*用宽高用百分比*/
div {
float: left;
width: 50%;
height: 400px;
}
- 最大幅最大幅（最大高さ最大高さ）
- 最小幅の最小幅（最小高さの最小高さ）
1.ビューポートラベルを設定し、初期化パターンを導入します
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
2.一般的なスタイルの初期化
body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}
