0

3つの異なるcssファイルを使用しているかどうかを知りたいのですが、iPhone / iPadのモバイルブラウザは3セットのcssファイルすべてをダウンロードしますか、それとも画面サイズに関連するものだけをダウンロードしますか？これを使って。

<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">

http://www.w3schools.com/html5/html5_app_cache.aspから使用する答えを見つけました

モバイル用に3つの異なるcssファイルがあり、cssがiphoneに保存されている場合でも、帯域幅を最小化して各cssのダウンロードを1つだけにします。これにより、使用する帯域幅を減らしながらWebサイトを高速化できます。

.htaccessファイルを作成し、これをに配置します。

AddType text/cache-manifest manifest

次に、demo.manifestが好きなものと呼ばれる別のファイルを作成し、

CACHE MANIFEST 
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css

次に、htmlページで、これを実行して宣言する必要があります。

<html manifest="demo.manifest">

cssとファイルを更新したら、demo.manifestとブラウザを更新して、demo.manifestの新しいバージョンとそのすべてのコンテンツをもう一度ダウンロードする必要があります。

4

3 に答える 3

8

標準デバイス（CSS-Tricks.comから）のメディアクエリは次のとおりです。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

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

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/*スタイル*/と書かれているすべての領域は、サポートしているさまざまなデバイス用に個別のCSSコンポーネントを配置する場所です。

**注意：これはかなり複雑なメディアクエリシートです。私は通常、風景のものを削除します。iPhoneメディアクエリはほとんどのスマートフォンを処理するので、通常、そのために2つの別々のスマートフォンを用意する必要はありません。これが私が通常使用するものです：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2012-07-03T19:19:26.000 に答える
1

それらすべてを呼び出すと、すべてロードされます。最善の計画は、メディアクエリを使用して、すべてのスタイルを1つのシートで分離して提供することです。

于 2012-07-03T18:38:05.860 に答える
0

それを防ぐためにJavaScriptを作成しない限り、それらすべてがダウンロードされます。

于 2012-07-03T18:36:15.297 に答える