14

コンテンツがビューポートに適合し、画像/テキストがすべてサイズ変更されるように、iPhoneブラウザ（UIWebviewコンポーネント）で表示されているHTMLのサイズを自動変更できるCSSまたはJavascriptを考え出そうとしています。（ズームアウトを達成することと同じではありません）。

別の質問から得た主なアイデアは、次のような要素の幅を調整することです。

@media screen and (max-width: 480px){
    *{
    max-width: 320px;
    }
}

通常のビューポートメタタグもあります。

<meta name="viewport" content ="width=device-width">

現在のように見えるため、これでは完全にサイズ変更されません。これが元のHTMLです。

この目標を達成するために他に何ができるのだろうかと思っていました。このHTMLだけでなく、他のHTMLページにもこれを正しく適用したくありません。

多分jQueryプラグインはこれのためにすでに存在しますか？

このページだけでこれを正しくしたくはありません。HTMLページでもっと一般的なものが必要です。

4

8 に答える 8

8

次のように、さまざまなスタイルシートをさまざまなメディアにリンクできます。

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

このようにして、あらゆる種類の画面サイズなどに対して異なるCSSルールを作成できます。これにより、非常に高い柔軟性が得られます。

ソース

于 2012-05-25T11:51:14.970 に答える
5

グリッドシステムは多くの柔軟性を提供します。ほとんどの画像とテキスト（必要な場合）を拡大縮小し、スムーズなモバイルレイアウトに変換します。

私は1140CSSグリッドhttp://cssgrid.net/を好みます

もあります：

于 2012-05-27T17:22:42.130 に答える
3

html-またはbody-elementでmax-widthを使用することはできないと思います。それは以下で動作します：

@media screen and (max-width: 480px){
    #wrap {
    max-width: 320px;
    }
}

（#logoをさらに変更する必要があります）

于 2012-05-25T11:12:16.897 に答える
2

注意してください：

<meta name="viewport" ...

iOSデバイスにバグがあるようです。

また、レスポンシブWebサイトを開発するためのTwitter Responsive Bootstrapと、テスト用のresponse.isもご覧ください。

于 2012-06-02T11:16:25.077 に答える
1

htmlページのheadタグの上部にある次のメタタグを使用します。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=0.83; maximum-scale=0.83; minimum-scale=0.83; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

コンテンツに合わせて、要件に応じてinitial-scaleとを変更できます。maximum-scale

于 2012-06-02T09:56:15.017 に答える
0 
@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* iPhone, Android rules here */
}

これらは独自仕様に見えるかもしれませんが、実際には、Firefox、Safari（モバイルを含む）、およびGoogleChromeに実装されているCSS3メディアクエリです。

その後、3つの異なるレイアウトを作成します。1.最大480pxの幅（iPhone、Android）：狭い間隔、単一列; 2.最大980px（縦向きのiPad）：上部セクションにのみ流動的な列、他の場所には単一列。3. 980pxより広い：固定された2列中央のレイアウト。

また、ターゲットデバイスに完全に適合するように、さまざまなスタイルごとにフォントサイズを調整することもできます。

また、iOSプラットフォームをターゲットにしている場合は、レイアウトがiDeviceの表示全体に自動的に表示されることを確認してください。モバイルWebキットでは、これを使用することをお勧めします。

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

これは、モバイルサファリでは、レイアウト自体が狭くても、ズームアウトされた980ピクセル幅のページが表示されるためです。これらの仕様の詳細については、https ：//developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.htmlを参照してください。

オリエンテーションメディアクエリはiPadでサポートされていますが、iPhoneでは機能しないことに注意してください。幸い、幅やデバイス幅などのサイズクエリは機能するため、JavaScriptを使用せずに、これらを組み合わせてレイアウトを切り替えることができます。

また、Retinaディスプレイデバイスの登場により、高解像度のグラフィックスを提供するためにそれらを特にターゲットにすることができます。詳細については、こちらをご覧ください：https ://webkit.org/blog/55/high-dpi-web-sites/

最後に、Retinaデバイスの場合、これを使用できます。

<link rel="stylesheet" media="only screen and -webkit-min-device-pixel-ratio: 2" href="highres.css">
于 2012-05-31T08:54:48.507 に答える
0

手始めに、これは「標準デバイスのメディアクエリ」の良いリファレンスです。http：//css-tricks.com/snippets/css/media-queries-for-standard-devices/

次のスタイリングはあなたのために働きますか？

/* Smartphones (portrait) ---------------- */
@media only screen and (max-width : 320px) {
     /* Styles */
     * {
        max-width: 320px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
     }
}

ボックスのサイズは、320pxの最大幅を適用するときにパディングを考慮に入れます。したがって、320pxにパディングを追加することはありません（デフォルトで追加されるように）。

頑張ってください。

于 2012-06-01T19:40:26.217 に答える
-1

ラッパーまたはbody-elementをに設定しますwidth: 100%; overflow:hidden;。すべてのサブ要素は。を取得しmax-width: 100%ます。次に、このツールを使用して、すべてのピクセルを親を基準にしたパーセンテージに変換します：http: //rwdcalc.com/それは私に大いに役立ちました！

于 2012-05-29T12:32:26.607 に答える