2

オンラインモバイルエミュレータを使用してサイトをテストしたところ、サイトは問題なく機能しているようです。私がしたいのは、すべてのサイズを小さくすることだけです。

CSSでこれを実行できるプラグインがあります。

.mobile {change any css I want}

したがって、たとえば：

#container {width:800px}  <-- normal css

できます：

.mobile #container {width:340px} <-- specific css for all mobile devices

それは素晴らしいことですが、これがどれほど退屈になるかがわかります。私のcssファイルの長さは2000行です。

だから私はすべてを変えるショートカットメソッドがあるかどうか疑問に思っています。サイトを元のサイズの30％に縮小する方法はありますか？jqueryのshrinkSiteプラグイン、おそらく？私はモバイルデバイスへの関心がゼロであるため、可能な限り最小限のステップでこれを実行しようとしています（私はモバイルデバイスを持っていないため）。

4

3 に答える 3

2

多くの作業を行わずにこれに最も近い方法は次のとおりです。

<meta name="viewport" content="width=640"/>

デフォルトのズームは、大規模なAndroidデバイスでは正しく機能しません（ユーザーが手動でズームインする必要があります）。ただし、Webサイト全体を均一にスケーリングします。上記のコードは、幅640ピクセルのWebサイト用です。

それ以上のモバイルサポートが必要な場合は、レスポンシブデザインに取り掛かります。これには、アダプティブコンテンツ（レイアウトは変更されますが、ほとんどのコンテンツは拡大縮小されません）またはFluid Grid（レイアウトは同じままです）のいずれかで、より多くの労力が必要になります。そして、すべてのコンテンツはある程度均一にスケーリングされます）。

アダプティブコンテンツは、モバイルデバイスをサポートするためにWebサイトを異なる方法で設計することを目的としていますが、Fluid Gridは、従来のデスクトップWebサイトをモバイルデバイスで拡張することを強制する試みです（これは、ブラウザーが機能するように設計された方法ではありません）。

アダプティブコンテンツは業界標準ですが、ページを設計および構築する前に多くの計画が必要です。Fluid Gridは、重要なWebサイトに実装するのに非常に問題があり、お勧めしません（以前に使用したことがあります）。

于 2012-12-09T23:36:52.697 に答える
2

すべてを小さくしようとしている場合は、この質問への回答のようにメタタグを使用できます。

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

このように、モバイルユーザーはサイトの全幅を見ることができ、ナビゲートするにはズームインする必要があります。

于 2012-12-09T22:01:32.217 に答える
0

@mediaクエリを試しましたか？

たとえば、通常のコードがある場合：

#container {
    width: 800px;
}

次のように使用できます。

#container {
    width: 800px;
}

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

範囲を使用して特定のデバイスをターゲットにしましたが、最大値を指定するだけで、@mediaクエリ内のコードがその解像度未満のすべてのデバイスに適用されます。Retinaディスプレイが表示されているため、別の懸念事項があり、ブラウザエージェントを使用することをお勧めします。しかし、最初に@mediaクエリ手法を深く研究してみると、mozilladevブログでより多くの資料が見つかるはずです。

于 2012-12-09T21:57:37.043 に答える