ホームページ > 記事 > ウェブフロントエンド > モバイル フロントエンドのビューポート (viewport)_html/css_WEB-ITnose について話しましょう
モバイル フロントエンドでよく参照されるビューポートは、ブラウザーがページ コンテンツを表示する画面領域です。関連するいくつかの重要な概念は、ディップ (デバイスに依存しないピクセル デバイスの論理ピクセル) と CSS ピクセルの関係です。ここでまず次の概念を理解します。
一般的なモバイル デバイスのブラウザはデフォルトでビューポート メタ タグを設定し、初期の問題を解決するために仮想レイアウト ビューポート (レイアウト ビューポート) を定義します ページは携帯電話で表示されます。 iOS と Android では基本的にこのビューポートの解像度が 980px に設定されているため、PC 上の Web ページは基本的に携帯電話でもレンダリングできますが、要素は非常に小さく見えます。一般に、Web ページはデフォルトで手動で拡大縮小できます。
ビジュアル ビューポート (ビジュアル ビューポート) は、物理画面の可視領域、画面表示の物理ピクセル、同じサイズの画面です、ピクセル密度 デバイスが大きいほど、ハードウェア ピクセルが多くなります。たとえば、iPhone の物理ピクセル:
理想的なビューポート (理想的なビューポート) は、通常、画面解像度と呼ばれるものです。
dip (デバイス論理ピクセル) は、デバイスのハードウェア ピクセルとは関係ありません。ディップは、任意のピクセル密度のデバイス画面上で同じスペースを占めます。
たとえば、MacBook Pro の Retina 画面ディスプレイのハードウェア ピクセルは 2880 * 1800 です。画面解像度を 1920 * 1200 に設定すると、理想的なビューポート (理想的なビューポート) の幅の値は 1920 ピクセルになり、ディップの幅の値は 1920 になります。デバイスのピクセル比は 1.5 (2880/1920) です。デバイスの論理ピクセル幅と物理ピクセル幅 (ピクセル解像度) の関係は次の式を満たします。
論理ピクセル幅 * 倍率 = 物理ピクセル幅
携帯電話の画面は通常設定できません 解像度通常、dip の値は、デバイスの製造元によってデフォルトで設定される固定値です。つまり、dip の値は、理想的なビューポートの値 (つまり、iPhone の画面解像度) です。 🎜 >
iPhone5: 解像度 320 * 568、物理ピクセル 640 * 1136、@2xデバイスに最適なビューポートの詳細については、http://viewportsizes.com/ をご覧ください。
CSS ピクセル
ビューポート メタ タグを使用してレイアウトを制御する
各属性の詳細な紹介は次のとおりです。 :
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
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 的宽度值是相等的。
与width类似,但实际上却不常用。
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用于指定用户能够放大的最大比例,例如
<meta name="viewport" content="initial-scale=1,maximum-scale=3" />
假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。
类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。
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/
通常情况下,了解了这些基本上可以做到网页在移动端屏幕中适配。不过在实际项目中,还是会存在一定的细节问题,在以后一点一点学习和总结。