2011-11-16 6 views
35

iPhoneを使用してサイトを読み込むと、縮小されません。私が見ているのは、左上の最もカップルの100平方ピクセルです。私はモバイルの最適化を初めて行っていますが、ほとんどのページが自動的に収まるようにスクロールするように感じています。ほとんどの質問は逆のシナリオにあるようです(ではなく、を縮小してください)。サイトをモバイル用に修正するにはどうすればいいですか(Iphone android ..)

私は、ページ全体の幅を目に見えるようにして、テキストを読むためにユーザがズームインしなければならないようにしたいと思います。

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

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

<!-- I Also tried: --> 
<meta name="viewport" content="width=1024, initial-scale=1"> 
+0

私はテストするためにhttp://iphonetester.com/を使用しています... –

+1

"それでユーザーはテキストを読むためにズームする必要があります。テキストを読むためにズームインする必要はありません "? – Doug

+1

@Doug:nope。電話機でレンダリングするページを完全にズームアウトしたいので、その1024pxの全幅がスクロールせずに画面に表示されます。このサイトは反応的であるか、そうでなければ巧妙であることを意図していませんでした。おそらくこれは理想的ではありませんが、これにより電話機でサイトが魅力的に見えるようになり、すべての主要なコンポーネントが見えます。ユーザーはズームするのにはかなり良いので、私はそれらを聞かせてください。 –

答えて

47

。今、私のiPhoneで動いています。

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

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

+0

それはあなたのために働いてうれしい。サイトもすばらしく見える。 –

+0

ああ、それはとても簡単です.. – user828591

2

最初に表示されようとしているが、ページ自体はまだズームなしでiPhone上に表示される320x460の画面サイズのために設計されなければならないページのどの部分ビューポートタグを制御します。ページの構造を変更しない場合、ビューポートはページの最初の表示方法を制御します。

+1

ビューポートメタタグはこの問題の正しいアプローチですか?私は ''を試しましたが、これは何も影響しないようです。 –

4

さまざまな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を変更することができます。

Hereは例です。

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.htmlは、それはあなたがビューポートのプロパティのほとんどを無視すべきであるように思えたし、ちょうどユーザースケーラブル「はい」に設定します。ここでのドキュメントの使用を

+0

私はこれが問題に近づく最も良い方法であることに同意しますが、私はモバイル向けにまったく新しいスタイルセットを作成する準備はできていません。私は、モバイル上でページ幅を表示(ズームアウト)するモバイル固有のCSSなしで、携帯電話のページを見ていることは分かっています。また、このアプローチにより、すべてのヘッダーやその他の幅広いグラフィックス用に、より小さなイメージを作成する必要がありますか? –

0

はちょうど

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

に入れて、携帯電話のブラウザのキャッシュアウトをクリア、width=1024を取り除きます。後で&をオフに戻す必要があるかもしれません。

+0

これは、私が*働かなかった質問に入れたコードとかなり似ています。 '.0'が何かをしない限り.... ' ' –

関連する問題