Viewport Meta(width詳細)とは何か、携帯電話での応用
viewportは携帯電話のブラウザのために設計されたmetaラベルです.一部のスクリーンはとても小さくてスマートフォンがあって、しかし弁解率はとても大きくすることができて、例えば小米4のデフォルトの解像度は:1920*1080で、多くのコンピュータのデスクトップのすべてよりも大きくて、伝統的なデスクトップのウェブサイトは直接携帯電話の上で読む時、インターフェースはとても小さくて、読書の体験はとても悪くて、このように原始のビューを携帯電話の上で拡大するメカニズムが必要ですviewportラベルを使用すると、この問題を解決できます.
width=device-width:この幅は元の画素(px)に依存せず、iphone 4(3.5インチ)画面の大きさがパソコン画面上の320 px表示の効果に相当する画面の幅に依存することを示す
下の図はviewportラベルを設定した携帯電話での表示効果です.右側の携帯電話は1格あたり50画素を表し、375 px、つまりiphone 6などの機種のサイズ表示の効果かもしれません.
さらに、 initial-scale:初期スケール maximum-scale:ズーム可能な最大スケール minimum-scale:ズーム可能な最小スケール user-scalable: の手動スケーリングを許可するかどうか
widthに値を設定することもできます.これは、幅プロパティが実際に最小幅ビューに変換されることを意味します.たとえば、レイアウトに少なくとも500ピクセルの幅が必要な場合は、次のタグを使用します.画面幅が500ピクセルより大きい場合、ブラウザは拡大ではなく拡大して画面に合わせます.
Chromeの最新版では、Matt Gauntのブログを参照して、Viewportの表示メカニズムをいくつか変更しました.
In Chrome M 40では、viewportについてマイクロ秒の変化があり、ユーザーに大きな違いをもたらす可能性があります.
Rick Byers(Googleエンジニア、Chromebook Pixelを担当)は、「viewport」の概念を「layout viewportレイアウトビューポート」(固定位置)と「ビジュアルビューポート」(ユーザーが実際に見たもの)に分ける
このような変更は、現在のウィンドウ位置に対して固定(position:fixed)されている懸濁DIV、例えばページにスクロールせずに常に上部に表示されているタイトルバーなど、拡大してもユーザーがドラッグできないため、県のフロートの後ろにあるリンクをクリックできない可能性があるため、たとえば、
virtual viewport(特定バージョンのChrome)を有効にすると、サスペンションボックスがドラッグされ、ユーザーはやっと後ろのリンクをクリックすることができます.
virtual viewportは追加のラベルを追加する必要はありません.このChrome issuesの議論から、Android WebViewを除いて、他のデバイスがvirtual viewportをデフォルトで有効にしていることがわかります.
注:Googleの伝統によれば、深刻なバグが発生した場合、この機能はRevertされる可能性が高い.以前Chromeチームがjsをより「完璧」にするためにjsの伝統的な特性を変え、大量のBUG後にrevertをもたらす事件があった.
結論:一部の携帯電話は画面が小さいので、携帯電話ではposition:fixedを慎む
ourjs-kris-Viewport Meta(width詳細)と携帯電話での応用から
width=device-width:この幅は元の画素(px)に依存せず、iphone 4(3.5インチ)画面の大きさがパソコン画面上の320 px表示の効果に相当する画面の幅に依存することを示す
下の図はviewportラベルを設定した携帯電話での表示効果です.右側の携帯電話は1格あたり50画素を表し、375 px、つまりiphone 6などの機種のサイズ表示の効果かもしれません.
さらに、
viewport portラベルには、次の属性があります.widthに値を設定することもできます.これは、幅プロパティが実際に最小幅ビューに変換されることを意味します.たとえば、レイアウトに少なくとも500ピクセルの幅が必要な場合は、次のタグを使用します.画面幅が500ピクセルより大きい場合、ブラウザは拡大ではなく拡大して画面に合わせます.
Chromeの最新版では、Matt Gauntのブログを参照して、Viewportの表示メカニズムをいくつか変更しました.
In Chrome M 40では、viewportについてマイクロ秒の変化があり、ユーザーに大きな違いをもたらす可能性があります.
Rick Byers(Googleエンジニア、Chromebook Pixelを担当)は、「viewport」の概念を「layout viewportレイアウトビューポート」(固定位置)と「ビジュアルビューポート」(ユーザーが実際に見たもの)に分ける
virtual viewportと説明しています.このような変更は、現在のウィンドウ位置に対して固定(position:fixed)されている懸濁DIV、例えばページにスクロールせずに常に上部に表示されているタイトルバーなど、拡大してもユーザーがドラッグできないため、県のフロートの後ろにあるリンクをクリックできない可能性があるため、たとえば、
video.jsのサスペンションタイトルバー(注:このサイトはサスペンションをキャンセルしました)では、ユーザーが拡大してスライドすると、タイトルバーは常に左側にとどまります.virtual viewport(特定バージョンのChrome)を有効にすると、サスペンションボックスがドラッグされ、ユーザーはやっと後ろのリンクをクリックすることができます.
virtual viewportは追加のラベルを追加する必要はありません.このChrome issuesの議論から、Android WebViewを除いて、他のデバイスがvirtual viewportをデフォルトで有効にしていることがわかります.
注:Googleの伝統によれば、深刻なバグが発生した場合、この機能はRevertされる可能性が高い.以前Chromeチームがjsをより「完璧」にするためにjsの伝統的な特性を変え、大量のBUG後にrevertをもたらす事件があった.
結論:一部の携帯電話は画面が小さいので、携帯電話ではposition:fixedを慎む
ourjs-kris-Viewport Meta(width詳細)と携帯電話での応用から