モバイル端末適応ソリューション（前編）_html/css_WEB-ITnose

モバイル端末での適応問題を理解するには、まずピクセルとビューポートを理解する必要があります。

ピクセル

モバイル上の要素に width:200px を設定するとどうなりますか?ここのピクセルの長さはどれくらいですか？ピクセルは Web レイアウトの基礎ですが、私たちは常にピクセルを直感的に使用しています。

実際には 2 種類のピクセルがあります:

1. デバイス ピクセル

   デバイス画面上の物理ピクセル数。の固定です。

2. CSS ピクセル

   CSS や JS で使用される抽象概念で、単位は px です。

ちなみに、CSS ピクセルは、デバイス非依存ピクセル (デバイス非依存ピクセル) とも呼ばれ、ディップと呼ばれます。 DPです。

そこで、要素 width:200px が将来どうなるかについて話しましょう。この要素は 200 個の CSS 要素にまたがります。200 個の CSS 要素がデバイスのピクセル数に相当するかどうかは、次の 2 つの条件によって異なります:

• ページが拡大縮小されているかどうか
• 画面が高密度であるかどうか

これら 2 つの側面については後で説明します。まず、ここではすべての 物理ピクセル が使用されていることに注意してください。

iPhone5 を例にとると、わかっていることは次のとおりです:

1. 解像度: 1136pt x 640pt

   は、画面上に垂直に 1136 個の物理ピクセルがあることを意味します、水平方向に 640 物理ピクセル

2. 画面サイズ: 4 インチ

   インチは面積ではなく長さの単位であることに注意してください。 4インチとは画面の対角の長さを指します。

3. 画面のピクセル密度: 326dpi

   画面のピクセル密度 (Pibel Per Inch) は ppi と呼ばれ、単位は dpi (dot per inch) です。 。これは、画面の水平方向または垂直方向の物理ピクセル数が 1 インチあたり 326 であることを意味します。

   原則として、画像がより詳細で鮮明になるため、ppi が高いほど優れています。

   ppi は 解像度 と 画面サイズ から計算できます:

   この Web サイトのリストは 多くのデバイスの解像度 と 画面サイズ が取得され、ppi が計算されました。

ビューポート

デスクトップ ブラウザでは、ブラウザ ウィンドウは CSS レイアウトを制約するビューポート (初期包含ブロックとも呼ばれます) です。これは、すべての CSS パーセンテージ幅計算の根本であり、その機能は CSS レイアウトが最大幅を制限する ことであり、ビューポートの幅はブラウザ ウィンドウの幅と一致します。

しかし、モバイル側では状況は非常に複雑です。

1. レイアウト ビューポート

   モバイル用に最適化されていない Web ページは、ユーザーがすべてを表示できるように Web ページを可能な限り縮小します。

   携帯電話で Blog Garden を表示する方法は次のとおりです。モバイル開発モードの Chrome でも表示できます。

   ユーザーが小さな画面でも Web ページを適切に表示できるようにするために、ブラウザの製造元はビューポートの幅を非常に大きく設定します。通常は 768px ～ 1024px の間で、最も一般的な幅は 980px です。 。

   したがって、携帯電話では、ビューポートはモバイル ブラウザの画面幅に関連付けられなくなり、ブラウザの製造元によって指定されたビューポートは レイアウト ビューポート と呼ばれます。

   レイアウト ビューポートが表示されないのは、Web ページの最大幅が 980 ピクセルであり、画面内で拡大縮小されることだけです。

   レイアウト ビューポートの幅は次のように設定できます:

   <meta name="viewport" content="width=640">

   ログイン後にコピー

   メディア クエリとレイアウト ビューポート

   700 ピクセルはレイアウト ビューポートの幅を指します

   @media (min-width: 700px){        ...}

   ログイン後にコピー

   document.documentElement.clientWidth/Height レイアウト ビューポートのサイズを返します

2. ビジュアル ビューポート

   ビジュアル ビューポートは、ユーザーが見ている Web ページ。サイズは画面内の CSS ピクセル数です。

   window.innerWidth/Height はビジュアル ビューポートのサイズを返します

3. 理想的なビューポート

   レイアウト ビューポートは次のとおりです。ユーザーは無愛想で、電話自体のサイズを完全に無視しています。そこで Apple は、 デバイスに最適なレイアウト ビューポート サイズ である理想的なビューポートの概念を導入しました。 Web ユーザーにとって理想的なビューポートでは、ページに入るときにズームする必要がありません。

   それでは、いわゆる「理想的な幅」とは何でしょうか?実際、レイアウト ビューポートの幅を画面の幅に変更すると、ズームする必要がなくなります。次のように設定して、ブラウザーに理想的なビューポートを使用するように指示できます。

   <meta name="viewport" content="width=device-width">

   ログイン後にコピー

   理想的なビューポートの定義はブラウザーの問題であり、開発者によって定義されたと単純に考えることはできません。開発者のみが使用できます。

   screen.width/height は、理想的なビューポートのサイズを返します。重大な互換性の問題があります。

   という 2 つの値が返される場合があります。
   1. 理想视口的尺寸（下载浏览器）
   2. 屏幕的设备像素尺寸（内置浏览器）

   Screen size tests 和 Understanding viewport 可以测试你的设备的 screen.width 值，同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器（如UC、Chrome）之间。

   默认浏览器是安卓系统内置的浏览器，长下面那个样子。而且它使用的是Webkit而不是Blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3，Google不再更新。

   而下载浏览器都返回的是理想视口尺寸。

缩放

缩放与设备像素、CSS像素的关系

缩放是在放大或缩小CSS像素，比如一个宽度为 200px 的元素无论放大，还是200个CSS像素。但是因为这些像素被放大了，所以CSS像素也就跨越了更多的设备像素。缩小则相反。

缩放与视口

缩放会影响视觉视口的尺寸

页面被用户放大，视觉视口内CSS像素数量减少；被用户缩小，视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。

用户缩放不会影响布局视口

注意，这是『用户缩放』，后面会说开发者设置缩放的情况

缩放比例

我们在开发者工具中可以在这里查看缩放比例：

这里的 0.3 是相对于 理想视口 的。

在下载浏览器中，可以这么算（理想视口与视觉视口的比）：

zoom level = screen.width / window.innerWidth

禁止缩放

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

设置缩放

<meta name="viewport" content="initial-scale=2">

使用 initial-scale 有一个副作用：同时也会将布局视口的尺寸设置为缩放后的尺寸。所以 initial-scale=1 与 width=device-width 的效果是一样的。

完美视口

解决各种浏览器兼容问题的理想视口设置

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

设备像素比

在谈到像素的时候，讲到除了缩放， 屏幕是否为高密度 也会影响设备像素和CSS像素的关系。

在 缩放程度为100% （这个条件很重要，在后面会说到）时，他们的比例叫做 设备像素比 (device pixel ratio)：

dpr = 设备像素 / CSS像素

可以通过JS得到： window.devicePixelRatio

设备像素比也和视口有关：

dpr = 屏幕横向设备像素 / 理想视口的宽

总结

这一篇总结了移动端适配需要掌握的知识，尤其是视口的知识。下一篇介绍现在市面上的适配方案。

参考文章

• ppk的移动端系列文章
• screen.width is useless
• devicePixelRatio
• More about devicePixelRatio
• screen sizes 收集了很多手机的信息

下面这些文章可能也会对你有帮助：

• 移动前端开发之viewport的深入理解
• 深入了解viewport和px