モバイル フロントエンドのビューポート (viewport)_html/css_WEB-ITnose について話しましょう

モバイル フロントエンドでよく参照されるビューポートは、ブラウザーがページ コンテンツを表示する画面領域です。関連するいくつかの重要な概念は、ディップ (デバイスに依存しないピクセル デバイスの論理ピクセル) と CSS ピクセルの関係です。ここでまず次の概念を理解します。

レイアウト ビューポート (レイアウト ビューポート)

一般的なモバイル デバイスのブラウザはデフォルトでビューポート メタ タグを設定し、初期の問題を解決するために仮想レイアウト ビューポート (レイアウト ビューポート) を定義します ページは携帯電話で表示されます。 iOS と Android では基本的にこのビューポートの解像度が 980px に設定されているため、PC 上の Web ページは基本的に携帯電話でもレンダリングできますが、要素は非常に小さく見えます。一般に、Web ページはデフォルトで手動で拡大縮小できます。

ビジュアル ビューポート (ビジュアル ビューポート) と物理ピクセル

ビジュアル ビューポート (ビジュアル ビューポート) は、物理画面の可視領域、画面表示の物理ピクセル、同じサイズの画面です、ピクセル密度 デバイスが大きいほど、ハードウェア ピクセルが多くなります。たとえば、iPhone の物理ピクセル:

• iPhone5: 640 * 1136
• iPhone6: 750 * 1334
• iPhone6 Plus: 1242 * 2208

理想的なビューポート (理想的なビューポート) とディップ (デバイスの論理ピクセル)

理想的なビューポート (理想的なビューポート) は、通常、画面解像度と呼ばれるものです。

dip (デバイス論理ピクセル) は、デバイスのハードウェア ピクセルとは関係ありません。ディップは、任意のピクセル密度のデバイス画面上で同じスペースを占めます。

たとえば、MacBook Pro の Retina 画面ディスプレイのハードウェア ピクセルは 2880 * 1800 です。画面解像度を 1920 * 1200 に設定すると、理想的なビューポート (理想的なビューポート) の幅の値は 1920 ピクセルになり、ディップの幅の値は 1920 になります。デバイスのピクセル比は 1.5 (2880/1920) です。デバイスの論理ピクセル幅と物理ピクセル幅 (ピクセル解像度) の関係は次の式を満たします。

論理ピクセル幅 * 倍率 = 物理ピクセル幅

携帯電話の画面は通常設定できません 解像度通常、dip の値は、デバイスの製造元によってデフォルトで設定される固定値です。つまり、dip の値は、理想的なビューポートの値 (つまり、iPhone の画面解像度) です。 🎜 >

iPhone5: 解像度 320 * 568、物理ピクセル 640 * 1136、@2x

1. iPhone6: 解像度 375 * 667、物理ピクセル 750 * 1334、@2x
2. iPhone6 Plus: 解像度 414 * 736、物理ピクセル 1242 * 2208、@3x、(実際の表示画像は 1080×1920 に縮小されることに注意してください。具体的な理由を確認してください: http://www.css88.com/archives/5972)

デバイスに最適なビューポートの詳細については、http://viewportsizes.com/ をご覧ください。

CSS ピクセル

CSS ピクセル (px) ) ページレイアウトに使用される単位。スタイルのピクセル寸法 (例: width: 100px) は CSS ピクセルで指定されます。ディップに対する CSS ピクセルの比率は、Web ページのスケーリング率です。Web ページがスケーリングされていない場合、1 つの CSS ピクセルは 1 つのディップ (デバイス論理ピクセル) に対応します。

ビューポート メタ タグを使用してレイアウトを制御する

まず、ビューポート メタ タグとその属性を見てみましょう:

各属性の詳細な紹介は次のとおりです。 :

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

width

width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width，例如：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip 的宽度值是相等的。

height

与width类似，但实际上却不常用。

initial-scale

initial-scale用于指定页面的初始缩放比例：

<meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度，initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍。

maximum-scale

maximum-scale用于指定用户能够放大的最大比例，例如

<meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的3倍。

minimum-scale

类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。通常情况下，不会定义该属性的值，页面太小将难以阅读。

user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页。例如：

<meta name="viewport" content="user-scalable=no" />

参考阅读：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

http://www.quirksmode.org/mobile/viewports.html 中文： http://www.cnblogs.com/2050/p/3877280.html 

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

http://blog.doyoe.com/2015/10/13/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%B8%80%E5%BC%B9%EF%BC%9Aviewport%E8%AF%A6%E8%A7%A3/

通常情况下，了解了这些基本上可以做到网页在移动端屏幕中适配。不过在实际项目中，还是会存在一定的细节问题，在以后一点一点学习和总结。