web-dev-qa-db-ja.com

モバイル向けに修正するためにサイトを強制的にスケーリングするにはどうすればよいですか（Iphone Android ..）

私のサイトをiphoneにロードしても、縮小しません。私が見るのは、左上で数百平方ピクセルです。私はモバイル最適化に慣れていませんが、ほとんどのページが自動的に収まるようにスクロールするように感じ、ほとんどの質問は私が持っている反対のシナリオのようです（force phonenot縮小する）。

ユーザーがテキストを読むためにズームインしなければならないように、ページ全体の幅を可視化し、それを広げたいと思います。

私は頭の中で次のコードを使って、または使わずに試しましたが、明らかな効果はありませんでした。

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

<!--  I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">
androidiphonemobileviewport
36
Zach Lysobey

ここでドキュメントを使用： https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

ほとんどのビューポートプロパティを無視し、ユーザースケーラブルを「yes」に設定する必要があるように思えました。今、私のiPhoneで動作しています。

<meta name="viewport" content="user-scalable = yes">

編集::モバイルテスターサイトではスケーリングが許可されていないため、スクロールバーが表示されるだけです。実際の電話ではこれが機能します。

49
Gregg B

異なるcssを使用し、クライアント設定に基づいて（サーバー側で）切り替えてみてください。たとえば、iPhoneは次のように自身を識別します。

 HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
 AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

サーバー側で使用できるスクリプト言語に応じて、cssを変更できます。

ここ は例です。

4
alinoz

ビューポートタグは、ページのどの部分を最初に表示するかを制御しますが、ページ自体は、ズームせずにiPhoneに表示される320x460の画面サイズに合わせて設計する必要があります。ページの構造を変更したくない場合は、ビューポートを使用して、ページの最初の表示方法を制御できます。

2
Jerry

width=1024を取り除き、ただ入れる

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

そして、携帯電話のブラウザキャッシュをクリアします。後でオフにして再びオンにする必要がある場合もあります。

0
Web Guy