1

最小幅 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でこれをどのように実現できるかについて、誰かアイデアはありますか? それとも駄目ですか?

ありがとう

4

0 に答える 0