web-dev-qa-db-ja.com

HTML5ボイラープレート：メタビューポートおよびwidth = device-width

適応/応答性の高いWebサイトを構築しています。

HTML5BPへのこの最近の変更に関して：

「 mobile/iOS css revisions 」

私は使い始めました：

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

...そして、私はこれを私のCSSに持っています：

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

initial-scale=1が含まれている場合、垂直から水平（iPad/iPhone上）に回転すると、レイアウトが2列（たとえば）から3列に変更されました（meidaクエリ、initial-scale=1および により）ビューポートスケールのバグを修正するJS ）。

要約するために、横向きモードのとき、これはページをズームします：

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

...そしてこれはしません：

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

注：このズーム効果は、 HTML5BP Webサイト iPad/iPhoneで。

私の質問：

  1. これは新しい標準になりますか（つまり、ランドスケープモードでのズーム）？
  2. 同僚や上司にこの変更を説明するのに少し時間がかかりました。彼らは水平モードで異なるレイアウトを見ることに慣れていました。これで、ページがズームされ、レイアウトが同じままになります（ただし、大きくなります）。これを無知な大衆に説明するためのヒントはありますか？

@robertc：ありがとう！それはとても役に立ちます。

私は実際にinitial-scale=1を持つnotが好きです。ズームよりもレイアウトの変更を見ることに慣れているのは同僚です。私は必ずforcedを追加してinitial-scale=1を追加して、みんなを喜ばせます（notズーム、レイアウトの変更の確認は、彼らが見慣れているものです。

HTML5BP githubのindex.html 、および ウェブサイト が<meta name="viewport" content="width=device-width">;を使用していることに気付きました。私にとっては、initial-scale=1を捨てるのに十分な理由ですが、 これらのこと を「ギークでない人」に説明しようとすると、眉が上がります。 ：D

html5viewporthtml5boilerplate
41
mhulse

これは新しい標準ではなく、常に機能している方法です。幅を固定ピクセル数に設定した場合、縦方向を横方向に回転すると、仮想ピクセルの数が一定のままになるため、スケールが変更されるだけです。 initial-scale=1を追加すると、切り替え時にスケーリングがブロックされると推測します。つまり、ページのスケーリング係数はデバイスが回転しても変化しません。最初にポートレートではなくランドスケープでロードした場合、ページはどのように表示されますか？

initial-scale=1を指定したときに得られる動作が必要な場合は、initial-scale=1を指定することをお勧めします。 HTML5 BoilerPlateは、あなたが想定で、自分の要件に合わせて変更するものです。

22
robertc

Appleは、ビューポートの動作を[多少]明確に説明しています here 。

主に、iOSデバイスのデバイスの幅とデバイスの高さは、ポートレートモードでの画面の大きさを指します。ビューポートの幅をdevice-widthに設定する場合、定数値に設定するのと同じです。したがって、アスペクトの変更に伴って画面の物理的な幅が変わると、ブラウザーは、入力したconstantサイズを横長モードで画面の幅に拡大します。この振る舞いは間違っているわけでも正しくないわけでもありません。

Appleはwidth=device-widthプラットフォームに合わせたアプリの場合、それは確かにそれを行う「アップル」の方法です。

IOS専用のWebアプリケーションを設計している場合、Webページの推奨サイズはiOSの表示領域のサイズです。 Appleデバイスの幅に幅を設定することをお勧めします。これにより、縦向きでスケールが1.0になり、ユーザーが横向きに変更したときにビューポートのサイズが変更されません。デバイスの幅ですが、横幅に合うように表示用に拡大または縮小されます]

個人的には、デバイス幅を絶対に設定しない方法でinitial-scale = 1.0を選択します。これにより、ビューポートが常にデバイスの画面を引き伸ばさずにいっぱいにするためです。 Appleはこの有効なマークアップも考慮します：

図3-14は、iPhoneで初期縮尺が1.0に設定されている場合の同じWebページを示しています。 iOSのSafariは、Webページが表示領域に収まるように幅と高さを推測します。ビューポートの幅は、縦方向ではdevice-widthに、横方向ではdevice-heightに設定されます。

11
trognanders

小さな更新を追加するには：これはまだドラフト形式ですが、間違いなく検討すべきものです。また、IE 10をサポートするための接頭辞付きバージョンがあります。HTMLの代わりにCSSを使用することにより、initial-scale:1;をzoom:1;およびmin、max、＆widthにheight/zoomオプションを与えると、調整範囲が拡大します必須。

extend-to-zoom救助に！ （ http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo ）

<meta name="viewport" content="initial-scale=1.0">は…に変換されます

@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}
@-ms-viewport{
  width: extend-to-zoom; 
  zoom: 1.0;
}

<meta name="viewport" content="width:device-width,initial-scale=1.0">は次のように変換されます…

@viewport{
  zoom: 1.0;
  width: device-width; /* = 100vw */
}
@-ms-viewport{
  width: device-width;
  zoom: 1.0;
}

注：width:extend-to-zoom 100%;はwidth:device-width;と等しい

http://dev.w3.org/csswg/css-device-adapt/

6
darcher

Mozillaのビューポートの説明 が最も詳細かつ有用であることがわかりました。抜粋は次のとおりです。

Widthプロパティは、ビューポートのサイズを制御します。 width=600などの特定のピクセル数、または100％のスケールでCSSピクセル単位の画面の幅である特殊値device-width値に設定できます。 （対応するheightとdevice-heightの値があります。これらは、ビューポートの高さに基づいてサイズまたは位置を変更する要素を持つページに役立つ場合があります。）

initial-scaleプロパティは、ページが最初にロードされるときのズームレベルを制御します。 maximum-scale、minimum-scale、およびuser-scalableプロパティは、ユーザーがページをズームインまたはズームアウトする方法を制御します

2
Justin

これを試しましたか？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
2
Piotr Ciszewski