5

デスクトップの幅が 980px を超え、モバイルの幅が 768px 未満のレスポンシブ サイトがあります。タブレットでは 980 ピクセルのビューポートでサイトを表示したいのですが、モバイルではデバイスの幅で表示したいと考えています。

具体的には、以下が欲しいです。

width = device width
if width >= 768px
  viewport = 980px
else
  viewport = width

この問題にアプローチする最善の方法は何ですか? サーバー上のユーザーエージェントをチェックしたくありません。

4

10 に答える 10

11

私が理解していることから、あなたはこれをしたい：

$(document).ready(function() {

    // lets push in a viewport 
    var vpw = (screen.width>=768)?'980':'device-width';
    $('head').prepend('<meta name="viewport" content="width='+vpw+'" />');

});

そして、私がテストしたことから、それは機能します。(ビューポートはドキュメントが「読み込まれた」後に書き込まれるため、これは少しおかしいです。画面上で小さなジャンプと YMMV が表示される場合があります。)

-- EDIT 最近は、このコードを頭の中に書きます。このように

<head>
  <script type="text/javascript">
    var vpw = (screen.width>=768)?'980':'device-width';
    document.write('<meta name="viewport" content="width='+vpw+'" >');
  </script>
</head>

これはmonacaが行うことなので、大丈夫だと思い ます https://github.com/monaca/monaca.viewport.js/tree/master

于 2013-01-25T09:55:08.120 に答える
2

これを実現するには、ビューポートメタタグとCSSメディアクエリを使用できます。HTMLの場合：

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

CSSで：

@media screen and (min-width: 768px) {
    article {
        width: 980px;
        margin: 0 auto;
    }
}​

JSFiddleはこちら

于 2012-10-16T00:46:14.120 に答える
2

これを使って：

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

CSSで

.container{
   width: 100%;         /* for mobile */
   max-width: 1024px;   /* for pc and tablet */
}

残りの CSS: 検索メディア クエリ ;)

モバイル デバイスを使用している場合、コンテナーの幅は 100% フルサイズです。しかし、PCでは最大幅1024pxです。したがって、css を使用して残りのデザインを設計できます。これには JavaScript やプラグインは必要ありません。

于 2015-03-05T11:12:15.690 に答える
1 
@media only screen and (min-width: 768px) and (max-width: 980px) { ... }

それに応じて調整します。基本的に、このコードは、その「真ん中の」デバイス（タブレットなど）の上限と下限の値を提供します。

次のような操作を行うことで、そのウィンドウを引き締めて、デスクトップCSSまたはそのほとんどを強制することができます。

@media only screen and (min-width: 800px) and (max-width: 1024px) { ... }

このようなことをする以外に、90年代を思わせるデバイスを「スニッフィング」するか（imo-当時はそうではありませんでしたか？）、ビューポートメタデータを使用する必要があります。

于 2012-10-15T13:36:55.600 に答える
1

モバイル デバイス (タブレットではない) のビューポートが 768 よりもかなり小さいことを考えると、メディア クエリを更新して小さいサイズで変更を適用してみませんか? すなわち:

@media only screen and (max-width: 480px) { ... }

これにより、携帯電話のスタイルは、最大幅 480 ピクセルの小型デバイスにのみ適用されます。

デスクトップ サイト (現在はタブレット) のサイトは、これらの解像度よりも上に表示されます。

于 2012-10-20T08:05:04.507 に答える
0

Twitter のブートストラップの足場 CSS を使用できますか? 彼らはあなたが少し調整できる事前に構築されたメディアクラスを持っています.

http://twitter.github.com/bootstrap/scaffolding.html

この部分はあなたが話していることに最も当てはまると思います

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px)  { ... }

その時点で、設定を使用して流体スパン幅を以下のようなものに設定できます

ラベル レイアウト幅 列幅 ガター幅
デフォルト 768px 以上 42px 20px
スマートフォンからタブレットまで 767px 以下 流動的な列 固定幅なし

注: 固定列幅を使用するため、div は固定列幅を超えて拡大縮小されません。

于 2012-10-19T17:44:38.057 に答える
0

また、クライアントがレスポンシブなモバイル バージョンを必要としているが、デフォルトのスケーリングをそのままにしておく場合はいつでもこれを行います。Web にはあまりありません。re: さまざまな画面サイズに対してビューポート タグを異なる方法で設定するため、JS を使用することは依然として最良の選択肢。デフォルトで応答しないビューポート幅を指定しています。

 <meta name="viewport" content="width=1000">

次に、できるだけ早く次のコードを実行します (つまり、jQuery がロードされた直後ですが、jQuery の .ready() 関数または同等のものによってラップされていないため、window.screen プロパティは正確ですぐに使用できるようです。これにより、コードが後で実行された場合に発生する可能性があるモバイルでのわずかなジャンプ):

if (window.screen.width < 601) {
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}
于 2013-10-22T12:23:43.147 に答える
-1

このコードをヘッドタグで使用できます

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

次に、このスタイルをモバイルデバイスに使用します

<link rel="stylesheet" media="print and (min-width: 767px)" href="http://…" />
于 2012-10-13T08:14:59.320 に答える