画面とモバイルスタイルシート

この質問や一部のGoogle検索結果でスタックオーバーフローのトピックを調べましたが、問題を解決できないようです。画面とモバイルスタイルシート

モバイルデバイス用のスタイルシート（mobile.css）は基本的に私のmain.cssのコピーであり、多くの属性が変更されています。私がスタイルシートとしてmobile.cssだけをロードするとき、私のiPhoneで素晴らしいと思っています。しかし、私は両方を置くと、私は両方の組み合わせが得られますが、main.cssの多くは

なぜか？

<head> 
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" /> 
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
</head>

出典

2011-09-20 xIlluzionx

どのように「両方に入れる」のですか？ – Blender

投稿したときに何らかの理由で自分のコードが表示されない... www.cuhvz.com/sandbox/home.phpでソースを見ることができます – xIlluzionx

修正済みです。今はうまくいくはずです。 – Blender

を

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

これは1つのCSSファイルを1つだけ読み込みます。width

Retinaディスプレイを搭載したiPhone 4と新世代iPod touchの場合は、注意すべきことがあります。 iPhone 4の幅は640ピクセルで、多くの開発者はモバイルブラウザの幅としてこの幅を数えません。このメタタグを文書に追加すると、問題が解決されます。

このメタタグは画像の品質に影響します。その問題を解決したい場合は、hereについて読む必要があります。

出典

2011-09-20 04:00:33 Mohsen

申し訳ありませんが、何らかの理由でマークアップが投稿されていない、おそらくコードとしてフォーマットするのを忘れていました。（www.cuhvz.com/sandbox/home.php） – xIlluzionx

'main.css'に' media = "画面と（min-width：480px）" 'を追加する必要があります。 – Mohsen

あなたが最初に言ったことをやった！ – xIlluzionx

そのいずれかのマークアップなしに知ることは難しいが、私はあなたが何か行う必要があります推測している：特定のデバイス/状態で別のファイルをロードする構文は、documentsによる
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

<link rel="stylesheet" href="base.css" /> // has all the common classes 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" /> 
<link rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />

出典

2011-09-20 03:59:42

申し訳ありませんが、何らかの理由でマークアップが投稿されていないため、おそらくコードとしてフォーマットするのを忘れていました。（www.cuhvz.com/sandbox/home.php） – xIlluzionx

@scott;あなたはこのようなmain.css後にmobile.cssを定義する必要があることがあります。

<link rel="stylesheet" href="main.css" media="screen" /> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />

またはあなたが定義することができ、あなたのごこのようなmain.cssでmobile css：

@media screen and (max-device-width: 480px){ 
    body { 
    background: #ccc; 
    } 
}

EDIT：

書き込みこの<!DOCTYPE html>をhtmlで<DOCTYPE html>の代わりに。 iPhoneは両方main.cssとmobile.cssをロードする一方

出典

2011-09-20 04:01:55 sandeep

あなたのモバイルスタイルシートは、コンピュータがmain.cssのみをロードすることを意味し、条件付きでロードされます。

あなたはiPhone上でページを読み込む際に、ゼロからスタートしたい場合は、ちょうどあなたのmobile.cssの先頭にCSSのこのチャンクを追加は：

/* 
YUI 3.4.0 (build 3928) 
Copyright 2011 Yahoo! Inc. All rights reserved. 
Licensed under the BSD License. 
http://yuilibrary.com/license/ 
*/ 
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

それが効果的にCSSをリセットします。

出典

2011-09-20 04:18:55 Blender

画面とモバイルスタイルシート

答えて

関連する問題