2

現在、ブログをモバイル向けに最適化しようとしています。ウィンドウ幅が 768 ピクセル未満のデバイス用に追加の CSS ファイルを追加する方法を選択しました。私のページはデスクトップ モードで幅 1022 ピクセルですが、モバイル バージョンは流動的な幅です。

したがって、ヘッドセクションの私のコードは次のとおりです。

var mobileSite = false;
if($(window).width() < 768) {
    mobileSite = true;
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />');
}

これまでのところ魅力のように機能します。次に行うことは、iPad (まだ Andriod でテストされていません) がコンテンツ セクションにズームインするのを止めることです。どちらのモードでも、iPad はズームインせずにページ全体を表示する必要があります。そのため、次のように追加しました。

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

成功せずに。私が理解しwidth=device-widthている限り、ブラウザにページのサイズを伝えることで、ブラウザはズームアウトする必要があることを知っています。私はinitial-scale=0.7どちらが役に立ったか試しましたが、それは私が試した特定のデバイス、iPad 2 だけだと思いwidth=1022ます。 iPhone や Lumia 920 などのデバイスはモバイル CSS を読み込まなくなりましたが、これは私にとって非常に奇妙です。しかし、私は自分のサイトのモバイルおよびデスクトップ バージョン用の特定のメタを使用できると考えました。

var mobileSite = false;
if($(window).width() < 768) {
    mobileSite = true;
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />');
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />');
} else {
    $('head').append('<meta name="viewport" content="width=1022, initial-scale=1.0, maximum-scale=1.0" />');
}

ここでも同じ効果。モバイル版が読み込まれなくなりました。したがって、mobile.css は追加されません。

問題はどこだ？

私が欲しいもの: ウィンドウ幅が 768 ピクセルを超える任意のデバイスでサイトのデスクトップ バージョンを完全にズームアウトして表示し、ウィンドウ幅が 768 ピクセル未満のデバイスごとに mobile.css をロードします。

4

1 に答える 1

0

ビューポートを使用できます

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

特定のビューポート サイズを対象とする CSS メディア クエリと一緒に。添付の JSFiddle は、Javascript を使用せずに達成しようとしていることを実行します: http://jsfiddle.net/3muzkfdt/

結果ペインのサイズを変更して、別の CSS を使用してページを表示します。

CSS を mobile.css と desktop.css にモジュール化する場合は、次のように CSS をインポートするだけです。

@media (max-width: 768px){
   @import 'mobile.css';
}

@media (min-width: 769px){
   @import 'desktop.css';
}

メディアクエリとその使用に関する詳細については、MDN を参照してください: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2014-09-12T15:52:37.950 に答える