0

次のコードを使用するレスポンシブ レイアウトに取り組んでいます。

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

デザイナーは、Large Desktop (幅 1370px)、Small Desktop (990px​​)、および Tablet (620px) のレイアウトを作成しました。モバイル (<620px) はタブレット バージョンを使用するが、それをスケーリングすることを前提としています。

しかし、どうすればそれを行うことができますか？ビューポートの幅が に設定されているためdevice-width、最小のスタイルシートが読み込まれますが、スケーリングはされません。

tl;dr --width=device-widthビューポートが特定の値よりも小さい場合に、モバイル ブラウザに値を無視して、代わりに Web サイトを調整するように指示する方法はありますか?

どうもありがとう。

4

1 に答える 1

1

まず第一に、これは典型的なレスポンシブ デザインの最善のアプローチではありません。最初にモバイルをビルドして幅を % に設定すると、コンテンツがデバイスの幅に合わせて拡大縮小されるため、発生する可能性のある問題を回避できます。

本当に別の道をたどりたい場合は、javascript を使用してメタ ビューポート要素を変更し、enquire.jsを使用してそれがいつ発生するかを指示することができます....

enquire.register("screen and (max-width:619px)", {

    match : function() {
$('meta[name=viewport]').attr(
 'content',
 'width=620; initial-scale=1.0'
);

},      

    unmatch : function() {
$('meta[name=viewport]').attr(
 'content',
 'width=device-width, initial-scale=1.0'
);
},
});

その点に注意してください

  1. これはテストされていません
  2. 私の jquery/javascript はひどいものですが、続けるには十分なはずです。
于 2012-10-04T05:37:24.213 に答える