モバイル Web 開発用のビューポート viewport_html/css_WEB-ITnose

× カタログ [1] レイアウト ビューポート [2] ビジュアル ビューポート [3] 理想的なビューポート [4] メタ タグ [5] 概要

前の単語

CSS 標準ドキュメントでは、ビューポートと呼ばれるのは、最初に含まれるブロック。この最初の包含ブロックは、すべての CSS パーセンテージ幅計算のソースとなり、CSS レイアウトの最大幅を制限します。デスクトップでは、ビューポートの幅はブラウザ ウィンドウの幅と同じです。モバイル側では、ビューポートはレイアウト ビューポート、ビジュアル ビューポート、理想的なビューポートに分割されます

レイアウト ビューポート

モバイル デバイスの問題は、ビューポートをブラウザ ウィンドウと同じ幅にすることで、見た目が醜くなる可能性があることです。結果。通常、モバイル ブラウザの幅は 240 ～ 640 ピクセルで、デスクトップ用に設計されたほとんどの Web サイトの幅は少なくとも 800 ピクセルです。したがって、ウェブサイトのコンテンツは携帯電話では非常に狭く見えます

//下の写真は携帯電話での Sina の表示状態です。ズーム操作を行わないと、文字はほとんどはっきりと見ることができません

。

携帯電話では、ビューポートはモバイルブラウザの画面幅に縛られなくなり、完全に独立しました。私たちはそれをレイアウト ビューポートと呼びます - CSS レイアウトはそれに基づいて計算され、それに基づいて制約されます

デスクトップ ブラウザ向けに設計された Web サイトに対応するために、モバイル デバイスのデフォルトのレイアウト ビューポートの幅は画面の幅よりもはるかに大きくなります、設定は 980px または 1024px (他の値でも構いません。これはデバイス自体によって決定されます) ですが、ブラウザーの表示領域の幅がブラウザーの表示領域の幅より大きいため、結果としてブラウザーに水平スクロール バーが表示されます。デフォルトのビューポートの幅は小さくしてください。次の図は、一部のデバイス上のブラウザのデフォルトのビューポート幅を示しています

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

ビジュアル ビューポート

独立したレイアウト ビューポートの作成は非常に役立ちましたが、デスクトップ Web サイトの携帯電話への移行は重要ですが、モバイル デバイスの画面サイズを完全に無視することはできません。一部の CSS 宣言は、CSS の最初の包含ブロックではなく、ユーザーに表示される内容に関連しています。また、Web 開発者にとって、ユーザーが Web サイトのどの部分を見ているのかを知ることが役立つ場合があります

ビジュアルビューポートは、ユーザーが見ている Web サイトの領域であり、そのための JavaScript プロパティは window.innerWidth/ です。高さ

[注意] Android webkit2とプロキシブラウザの間には互換性の問題があります

スケーリングはビジュアルビューポートのサイズに影響します。ズーム レベルが 100% の場合、ビジュアル ビューポートはデバイスの画面と同じ幅になります。ズームインすると、画面上に表示される CSS ピクセルが少なくなるため、ビジュアル ビューポートが小さくなります。一方、ズームアウトすると、画面上に表示される CSS ピクセルが増えるため、ビジュアル ビューポートが大きくなります。したがって、ズームの程度とビジュアル ビューポートのサイズは反比例の関係にあります。iPhone 5 を例に挙げると、ブラウザ レイアウト ビューポートのデフォルトの幅は 1024 ピクセルであり、画面の幅は小さくなります。デバイス ピクセルは 640 ピクセルのみです。DPR は 2 なので、CSS ピクセルは 320 ピクセルです。ここで、ユーザーは 100% から 200% にズームインし、画面上の CSS ピクセルが 160 個だけになるまで CSS ピクセルが拡大されます。ただし、レイアウト ビューポートは 1024 ピクセルのままであるため、ページ上の要素のサイズは変わりません。

[注意] ユーザーがズームすると、ビジュアルビューポートのサイズのみが変化し、レイアウトビューポートは変化しません。モバイルのスケーリングによって CSS レイアウトが再計算されることはありません。携帯電話ではズームが頻繁に発生し、携帯電話のプロセッサの動作が非常に遅く、バッテリーの消耗が激しいため、再レイアウトしない方がパフォーマンスに大きなメリットがあります

//次のコードは、3 秒後にページが 100% から 200% にズームされることを示しています%

<script>test.innerHTML = '屏幕宽度:' + screen.width + '<br>视觉视口:' + window.innerWidth;setTimeout(function(){    var meta = document.getElementsByTagName('meta')[1];    meta.setAttribute('content','initial-scale=2');    test.innerHTML = '屏幕宽度:' + screen.width + '<br>视觉视口:' + window.innerWidth;},3000);</script>

理想的なビューポート

デフォルトでは、モバイルまたはタブレットのブラウザのレイアウト幅は 980 または 1024 ピクセルです。これにより、デスクトップサイトが潰れるのを防ぐことができますが、狭いサイトは狭い画面によくフィットするため、特にモバイルユーザーにとっては理想的ではありません

つまり、レイアウトビューポートのデフォルトの幅は理想的な幅ではありません。 Apple や Apple に倣う他のブラウザ メーカーが理想的なビューポートを導入しているのはこのためです。デバイスに最適なレイアウト ビューポート サイズです。理想的なビューポートで表示される Web サイトは、閲覧や読書に最適な幅を持ち、ユーザーは最初にページにアクセスするときにズームする必要がなくなりました

　　只有当网站是为手机准备的时候才应该使用理想视口。只有主动地往页面里添加meta视口标签时理想视口才会生效。如果没有meta视口标签声明，那么布局视口将会维持它的默认宽度，理想视口只有当显式地使用它的时候才会产生影响

//这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致<meta name="device" content="width=device-width">

　　定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。例如，三星galaxy pocket上的安卓webkit的理想视口是320*427px，而opera mobile12的则是240*320px。但是，浏览器的理想视口的大小也取决于它所处的设备。三星galaxy s4上的chrome的理想视口是360*640px，但是在nexus7上，则是601*962px。原因很明显：Nexus7是一个平板，它拥有更宽的屏幕，因此理想视口也应该更宽

　　screen.width/height返回是理想视口的尺寸

　　[注意]当设备方向改变时，iphone中理想视口screen.width/height的值并不会改变，但安卓设备会改变。而布局视口document.documentElement.clientWidth和视觉视口window.innerWidth的值，苹果和安卓都会改变

meta视口

　　meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。它由apple发明，其他手机和平板复制了它的大部分内容。桌面浏览器不支持，也不需要它，因为它们没有理想视口的概念。IE是一个例外:在手机上它支持meta视口标签，但最好使用@-ms-viewport

　　meta视口标签应该被放在HTML文档的93f0f5c25f18dab9d176bd4f6de5d30e中，并且按以下格式书写:

<meta name="viewport" content="name=value,name=value">

　　每一个名/值对都是一个给浏览器发号命令的指令。它们被逗号分隔，共有6个

　　1、width:设置布局视口的宽度为特定的值
　　2、init-scale:设置页面的初始缩放程度和布局视口的宽度
　　3、minimum-scale:设置了最小缩放程度(用户可缩小的程度)
　　4、maxmum-scale:设置了最大缩放程度(用户可放大的程度)
　　5、user-scalabel:是否阻止用户进行缩放
　　6、height:设置布局视口的高度(未被实现)

width

　　【0】不设置宽度

　　例如，iPhone4S如果不设置viewport，他就会默认是980px，就像把屏幕分成980份。如果设置一个元素为100px*100px，看起来就是屏幕的100/980

　　【1】把布局视口的尺寸设为一个理想的值

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

　　假如，iPhone4S如果设置viewport width=device-width，他就会是320px，就像把屏幕分成320份。如果设置一个元素为100px*100px，看起来就是屏幕的100/320 

　　【2】把布局视口的尺寸设为固定宽度

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

　　浏览器支持的最大值是10000个像素，最小值约为理想视口的20%，安卓webkit不允许任何小于布局视口的宽度。如果你指定了一个这样的值，它会自动转换为默认布局视口，通常是980px。IE10不允许任何超出480px的值，超出的话会自动转换为布局视口的默认宽度1024px

initial-scale

　　initial-scale指令设置了页面的初始缩放程度。1代表100%，2代表200%。缩放程度是根据理想视口来计算的

当前缩放值 = 理想视口宽度  / 视觉视口宽度

　　[注意]安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才表现正常

　　缩放程度与视觉视口的宽度是逆相关的，越高的缩放程度意味着视觉视口越小。所以initial-scale=1时视觉视口尺寸和理想视口尺寸是一样的。initial-scale=2会放大到200%，因此视觉视口的高宽是理想视口的一半

【默认值】

　　安卓设备上的initial-scale并没有默认值，而在iphone和ipad上，无论viewport设置的宽度是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的　

【1】width=device-width,initial-scale=1

　　IE10中当initial-scale为1时，它在横屏模式下宽度保持着320px，但width=device-width时它会从320px变为480px

　　所以为了在所有浏览器上解决这个问题，需要使用

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

【2】width=400,initial-scale=1

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

　　把布局视口的宽度设为400px，然后再把它设为理想视口的宽度。结果浏览器选择了每个方向最大的尺寸。因此早期的iphone手机在竖屏模式下的布局视口宽度是400px(320px和400px中较大的值)，在横屏模式下是480px(480px和400px较大的值)

　　因此，可以给布局视口设置一个最小宽度，并在设备和方向上有需求时允许浏览器将布局视口设得更宽

minimum-scale和maximum-scale

　　没有这些指令的时候，浏览器允许用户的缩放级别达到5(20%-500%);有这些指令的时候，范围可扩大到10(10%到1000%)。更高的缩放程度不被支持，因此设置maxmum-scale=20和设置maxmum-scale=10的效果是一样的。安卓webkit不支持minimum-scale。同样，它的缩放范围是4(25%-400%)，并且不支持改变这个范围

user-scalable

　　user-scalable=no表示禁止缩放

【改变meta视口标签】

　　在大多数浏览器中，可以改变meta视口标签，假设meta视口是文档中的第一个meta标签

var meta = document.getElementsByTagName('meta')[0];meta.setAttribute('content','width=400');

　　我们无法通过移除meta标签来使布局视口变回它默认的宽度。但可以把它设为一个固定的值。例如，如果想提供"切换到桌面布局"的功能，可以把宽度设为980px或1024px

【常用meta视口标签】

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

　　该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放

 

总结

　　在桌面浏览器中，浏览器窗口就是约束CSS布局的视口。而在手机端，布局视口会限制CSS布局；视觉视口表示浏览器的可视区域，决定用户看到什么；理想视口是对于特定设备的特定浏览器的布局视口的一个理想尺寸