ビューポート関連の知識

メインは、基本的な原則とビューポートの一部を使用することを言いました

(I)の概念

この意志(モバイルブラウザ(ビューポート)通常はこの仮想「ウィンドウ」画面より広い(ビューポート)の仮想「ウィンドウ」内のページであるので、あなたはすべてのページに小さなウィンドウを圧迫する必要はありません。携帯電話のブラウザに最適化ページにはダメージレイアウトしない)、ユーザーは、パンやページのさまざまな部分を見るためにズームすることができます。Safariブラウザのモバイルバージョン、ビューポートのメタタグの最新の導入は、Web開発者は、ビューポートのサイズとスケール、他の携帯電話のブラウザも、基本的なサポートを制御することができます。

エンドモバイルブラウザがページをレンダリングする仮想ウィンドウ内の画面よりも通常より広くしている、これは仮想ウィンドウのビューポートで、目的は、それらをユーザに提示完了することができ、最終ページに適合しない正常な動きを示すことです。私たちは時々領域の幅がビューポートで表示するには、ここで、あなたは水平スクロールバーが表示されますページのデスクトップバージョンにアクセスするためにモバイルデバイスを使用します。

 

コントロールにビューポートメタタグの(ii)の使用

私たちは、多くの場合、このコード行を参照してください。

<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0、ユーザースケーラブル= 0」>

メタタグの役割は、ユーザが手動でズームすることができないが、デバイスの幅に等しい現在のビューポートの幅を可能にすることです。

 

 以下は、カンマで区切られた複数の属性を使用しながら、これらの属性は、使用するために混合することができるビューポートいくつかの属性であります

 

㈢width初期規模

設定するときwidthinitial-scale、ブラウザが自動的に適応の最大値を選択します。

このような設定のように:

 <メタ名= "ビューポート" コンテンツ= "幅= 400、初期スケール= 1">

ブラウザは、現在のウィンドウ幅の理想的なビューポート300、あれば、大きな値を選択するように適合されているinitial-scale幅400の値を取得するために、1の値は、現在のウィンドウは、理想的なビューポート480、480が取られている場合。

実際には、width=device-widthinitial-scale=1彼らはアプリケーションを表しideal viewportますが、計算された、iPhone用のIEやその他のモバイルデバイスに関係なく、水平方向と垂直方向の画面の、縦画面のデフォルトの幅が取られており、最高の互換性は、<メタ名=「ビューポート」コンテンツを書かれています 」= 幅=デバイス幅、initial- = 1「スケール>

 

あなたは、ビューポートに幅を設定するかどうかをiPhoneとiPadで、デフォルトのズーム値を指定しない場合は、iPhoneとiPadが自動的にスケーリング値を算出し、どのくらいの、ある、現在のページ水平スクロールバーを達成するために表示されない(または:概要彼は、ビューポートの幅が画面)目的の幅であると述べました。

 

私はそれが役に立てば幸い。

 

おすすめ

転載: www.cnblogs.com/shihaiying/p/11266732.html