41

アダプティブ/レスポンシブウェブサイトを構築しています。

HTML5BPに対するこの最近の変更について：

「モバイル/iOScssリビジョン」

私は使い始めました：

<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">

注： iPad /iPhoneでHTML5BPWebサイトを表示すると、このズーム効果が実際に動作していることがわかります。

私の質問：

  1. これは新しい標準になりますか（つまり、横向きモードの場合はズーム）？
  2. 私はこの変更を同僚や上司に説明するのにかなりの時間を費やしています...彼らは水平モードで別のレイアウトを見ることに慣れています。これで、ページがズームされ、レイアウトは同じままになります（大きいことを除いて）。これを無知な大衆に説明する方法についてのヒントはありますか（そのうち、私は含まれている可能性があります）？

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

私は実際に持っていないinitial-scale=1のが好きです; ズームではなくレイアウトの変更を確認することに慣れているのは私の同僚です。みんなを喜ばせるためだけに追加することを余儀なくされると確信しています（ズームせず、レイアウトの変更を見るのは、彼らが見慣れているものだからです）。initial-scale=1

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

4

5 に答える 5

22

これは新しい標準ではなく、常にAFAIKで機能する方法です。幅を固定ピクセル数に設定した場合、仮想ピクセル数は一定のままであるため、縦向きから横向きに回転するとスケールが変わるだけです。initial-scale=1切り替えると、追加によってスケーリングがブロックされると思います。つまり、デバイスを回転させてもページのスケーリング係数は変わりません。最初に縦向きではなく横向きにページを読み込んだ場合、ページはどのようになりますか？

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

于 2012-06-13T13:31:51.273 に答える
11

Appleは[ある程度]ここでビューポートの動作を明確に説明しています。

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

Appleはプラットフォームに合わせたアプリを提案width=device-widthしているので、それは確かに「Apple」のやり方です。

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

個人的には、絶対的なデバイス幅設定アプローチを使用しないinitial-scale = 1.0を好みます。これにより、ビューポートが常にデバイス画面全体に拡大せずに表示されるためです。Appleは、この有効なマークアップも考慮します。

図3-14は、iPhoneで初期スケールが1.0に設定されている場合の同じWebページを示しています。iOS上のSafariは、表示領域にWebページが収まるように幅と高さを推測します。ビューポートの幅は、縦向きの場合はデバイスの幅に、横向きの場合はデバイスの高さに設定されます。

于 2012-11-09T06:22:57.870 に答える
7

少し更新を追加するには：これはまだドラフト形式ですが、間違いなく調査する必要があります。IE10をサポートするためのプレフィックスバージョンもあります。HTMLの代わりにCSSを使用することで、、、のに/オプションを適用し、必要に応じて調整の範囲をさらに広げることで、話している多くの混乱を解消しinitial-scale:1;ます。zoom:1;minmaxwidthheightzoom

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/

于 2013-12-24T16:49:44.467 に答える
2

私はMozillaのビューポートの説明が最も詳細で役立つと思いました。抜粋は次のとおりです。

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

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

于 2013-10-08T22:10:57.910 に答える
1

これを試しましたか？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2014-02-24T21:07:55.667 に答える