width=device-width を設定するときにメタ ビューポート タグが機能する方法を正しく理解していることを確認しようとしています。
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">ピクセル単位を使用してモバイル デバイスで作業する場合、320 ピクセル幅のグリッド上で与えられているかのように扱われる (または扱われるべき)というのは正しい記述でしょうか? つまり、 width:160px の要素は画面の (160/320 = 50%) を占めますか?
この動作は、デスクトップ ブラウザーで実行している場合は機能しないようです。モバイルとデスクトップで同じデザインを取得したい場合、パーセンテージまたはvw/vh単位のいずれかを使用する必要がありますか?
The first thing to realize is that CSS pixels and device pixels are not the same thing. The number of pixels when you set something to width: 160px in CSS relates to CSS pixels, which have very little to do with the actual pixels of the device.
Mobile browsers (on reasonably modern smartphones) create a "fake" viewport, that is emulating a desktop-width browser size, that is also zoomed out so that it fits on the screen. The measurements for this fake viewport is usually somewhere around 800-1000 CSS pixels wide (iPhones, for example, use 980px). This is to make sure that non-optimized sites still display OK on phones, as you can zoom in on specific parts etc.
When you use the meta viewport tag with width=device-width, you are telling the device that your site is adapted for viewing on any viewport size, and that you don't want the "fake desktop" measurement.
Instead, the browser should set the number of CSS pixels that fit on the screen to what is considered the "ideal" number of pixels for that device. On old iPhones, that was actually 320 pixels. On iOS devices with a retina screen, the CSS-pixel-to-device-pixel ratio is different, so the screen is 640px wide, but the ideal number of CSS pixels is still only 320. On other smartphones, the measurement is different - usually anything from 300 - 500 pixels on a smartphone.
If you want your layout to adapt to the number of CSS pixels, you are probably better off leaving the specific pixel measurements out of it and use percentages. 50% of the viewport will always be 50% of the viewport no matter how many CSS pixels you have to play with.
多くの場合、これらの有害な宣言はまったく必要ありません。
maximum-scale=1, user-scalable=no
私の目があまり良くないので、Web ページで使用されているフォントが不快なほど小さいことがよくあります。そして、サイトがズームして読むことができない場合、さらに厄介なことはありますか?
それでも違うと思う場合は、この記事を注意深く読んでください: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
そこからの引用（私の強調）：
最大スケールを設定するということは、最大ズームを設定するということです。情報へのアクセスが最優先される Web サイト (すべてではないにしてもほとんどの Web サイト) では、a を設定する
maximum-scale=1と、ユーザーはズームできなくなります。レスポンシブ Web サイトを使用している場合、これは重要ではないように思えるかもしれませんが、ユーザーがズームする必要がある場合がたくさんあります: 小さなボディ フォント (少なくともユーザーのニーズのために)、写真の詳細を確認するなど。美的な理由だけでアクセシビリティの問題を引き起こします。
このパラメーターは、ズームインまたはズームアウトする機能を削除し、
maximum-scale. それを使用する本当に特別な理由がある場合 (たとえば、Web アプリをコーディングしていて、フォーム入力のズームを避ける必要がある場合)、修正したいアクションだけのために、JavaScript で追加および削除してみてください。とにかく、スマートフォン ユーザーはWeb サイトのズームインとズームアウトに慣れているため、フォームに入力した後にズームアウトする必要があるのはデフォルトの動作であり、おそらく修正する必要はないことを覚えておいてください。
コンボ ブレーカーを想像してみてください。
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
おめでとう、あなたのウェブサイトは左上隅の最初の 300 ピクセルまたは 400 ピクセルにズームされました。ユーザーはズームアウトできず、情報にアクセスする唯一の方法は、ウェブサイトを幅 300 ピクセルで辛抱強く見ることです。余分なタグによって台無しにされた全体の経験。