Ekranowe i mobilne arkusze stylów

Przejrzałem tematy przepełnienia stosu na to pytanie, a także niektóre wyniki wyszukiwania google, ale wydaje się, że nie mogę rozwiązać mojego problemu.

Stworzyłem arkusz stylów dla urządzeń mobilnych (mobile.css), który jest zasadniczo kopią mojego głównego.css ze zmianami wielu atrybutów. Kiedy Ładuję tylko mobilne.css jako arkusz stylów wygląda świetnie na moim iPhonie, tak jak chcę. Jednak kiedy wkładam oba, dostaję mieszankę obu, ale więcej głównego.css

Dowolny pomysł dlaczego?

<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>
Author: Blender, 2011-09-20
Source

4 answers

Zgodnie z dokumentami, składnia ładowania innego pliku w określonym urządzeniu / stanie wygląda następująco: 

<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" />

To załaduje tylko jeden plik css na każdą ilość width

Dla iPhone 4 i iPod Touch nowej generacji, które mają wyświetlacz Retina, jest coś, co powinieneś zauważyć. szerokość iPhone ' a 4 to 640 piksele, których wielu programistów nie liczy jako szerokość przeglądarki mobilnej. Jeśli dodasz to poniżej meta tag w dokumencie problem będzie solved 

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

Ten meta tag będzie miał wpływ na jakość zdjęć. Jeśli chcesz rozwiązać ten problem, musisz przeczytać o tym tutaj .

 31
Author: Mohsen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-23 20:47:07

Its hard to know without any markup but I ' m guess you should do something like:
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)" />
 3
Author: James Khoury,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-20 03:59:42

Twój mobilny arkusz stylów jest ładowany warunkowo, co oznacza, że komputer załaduje tylko main.css, podczas gdy iPhone załaduje zarówno main.css i mobile.css.

Jeśli chcesz zacząć od zera podczas ładowania strony na iPhonie, po prostu dodaj ten fragment CSS na górze swojej mobile.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}

Skutecznie resetuje CSS.

 0
Author: Blender,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-20 04:18:55

@scott; być może musisz zdefiniować swoje mobile.css po main.css Tak: 

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

Lub możesz zdefiniować swoje mobile css w swoim main.css w następujący sposób: 

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

EDIT:

Napisz to <!DOCTYPE html> zamiast <DOCTYPE html> w swoim html.

 0
Author: sandeep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-20 04:27:55