最小幅 768 ピクセルまでの (半) レスポンシブ サイトを構築しました。これは、コンテンツが iPad より小さい画面ではあまり実用的ではないためです。
私は<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0" />
HTML の頭にあり、次に CSS の本文に設定された最小幅を持っています。
ただし、iPhone、Nexus などのモバイル デバイスで見栄えのするサイトにしたいと考えています。
私がやったことは、次のような JavaScript です。
if (document.documentElement.clientWidth < 480) {
document
.querySelector("meta[name=viewport]")
.setAttribute('content', 'initial-scale=0.4', 'maximum-scale=0.4', 'width=768');
};
これは iPhone でうまく機能し、ビューポートに収まるようにサイトをスケールアウトし、ユーザーは必要に応じてズームインできます。
この同じコードは、Android では同じようには動作しません。代わりに、ページは左上隅にズームインして読み込まれ、ユーザーはページ全体を表示するためにズームアウトする必要があります。
Androidでこれをどのように実現できるかについて、誰かアイデアはありますか? それとも駄目ですか?
ありがとう