2012-02-21 6 views
14

私は、デバイスが持つことができる画面サイズにリサイズする必要のあるWebAppで作業しています。 iOSや古いAndroid版では、viewportタグが正常に動作します。画面上の画像は常に画面に合わせてサイズが変更されます。
(こちらの説明はhttps://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19
Galaxy Nexus(Android 4.0)では動作しません。左右に約20ピクセルのスペースがあり、なぜ彼がこれを行うのかわかりません。Galaxy Nexus/Android 4のビューポートタグが機能しないのはなぜですか?

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

どんなに私がタグについて変更何、スペースが常にあるんやコンテンツが画面に収まらない: 私のビューポートタグは次のようになります。 http://easyeve.w3y.de/link/index.html
iPhoneでこのリンクを開くと、コンテンツは完全に適合します(黄色=本体は表示されません)。文書の幅は320pxです。 Galaxy Nexusでは黄色いスペースが表示され、ドキュメントの幅は360px(ディスプレイの解像度のちょうど半分)です。これも320pxにする必要があります。 この問題もありますか?修正する方法はありますか?

更新:Galaxy Note/Android 2.3.6 で同じ問題が発生しましたので、Android 4の問題ではありません。それは

答えて

4

..私は推測する大画面サイズに関係している、ここで非常に同じ問題(ギャラクシーネクサス - アンドロイド4.0.2)、私は、デフォルトのブラウザで

設定をおよそ通常のWebページを話していますビューポートメタ最初のスケール以下で1(ズームアウト)はブラウザによって無視されるようです。 1より大きい値(ズームイン)は正常に機能します。

あなたは物事を変更することができますブラウザ([設定]> [高度)の設定があります。

  1. デフォルトのズーム - それは違いますが、それは問題に
  2. ページの自動調整が解決しません - 私の場合には違いはありません

すべてはChromeブラウザ(現時点ではベータ版)で完璧に動作するようだが、それはICS /ギャラクシーネクサスのためないデフォルトのブラウザです。

UPDATE(溶液):

メタビューポート "幅=装置幅" の設定は、ギャラクシーネクサスに失敗しました。
設定ビューポート「幅= 1280」はちょうど素晴らしい(1280pxは銀河系のネクサスの画面の幅です)です。

設定「幅= 1280、ユーザースケーラブル=なし」(あなたはユーザースケーラブル=いいえがあっても、ズームアウトすることができます)、再びそれを壊すことに注意してください:(

+0

答えてくれてありがとうございます:( 私のビューポートタグを** width = 1280 **に変更しましたが、私のサイトは非常に大きく(デスクトップビューのように)大きくなっていますが、私のコードを変更しました: [link](http://easyeve.w3y.de/link/index.html) – user1222883

+0

@Petr Urban Thanx、それは私のために働いています....: ) –

0

私は今日、この問題で論争終わりました私の問題は基本CSSに加えてWordpressスタイルシート(別のテーマから)を扱わなければならなかったので、ちょっと複雑だった。Chromeは携帯電話とタブレットで完璧に動作し、しかし、株式ブラウザはズームアウトしてデスクトップビューを表示していました。どちらの側にも余白がありませんでしたが、ブラウザはサイドバーとコンテンツdivから浮動小数点を削除し、メインコンテンツを拡大表示する必要がありました(私は@mediaクエリを使用しています)。私が実際には変わったように、私は実際にズーム設定を遠くに設定し、爽やかにして、ZoomをMediumにリセットしてから、これを修正しました。

あなたのページのHTMLとCSSを見ると、ページdivの特定のピクセル幅を設定していることがわかりました。私はあなたが幅の代わりにパーセンテージを使用する必要があると確信しています。たとえば、私の中心となるコンテンツ部門はmargin: 0 auto;,min-width:320px;max-width:900px;、およびwidth:100%;です。

+0

ありがとうございます。あなたはすべての幅をパーセンテージに設定するとうまくいくでしょうが、それは私が望むものではありません。私は液体のデザインを望んでいない.. – user1222883

2

Galaxy Tab 2で何か似たようなことが起こりました。アプリケーション用にWebSettingsを設定するときは、webViewSettings.setUseWideViewPort(true)を設定してみてください。これは、Androidにビューポートのメタタグを考慮させることになります。私のアプリのGalaxy Tab 2の場合は無視されていましたが、これを変更するまでビューポート内のすべてが間違って描画されていました。

関連する問題