J'ai parcouru les rubriques de débordement de pile de cette question, ainsi que certains résultats de recherche sur Google, mais je n'arrive pas à résoudre mon problème.
J'ai créé une feuille de style pour les appareils mobiles (mobile.css) qui est essentiellement une copie de mon fichier principal.css avec des modifications apportées à de nombreux attributs. Lorsque je ne charge que mobile.css en tant que feuille de style, cela a fière allure sur mon iPhone, exactement comme je le veux. Cependant, quand je mets les deux, je reçois un mélange des deux, mais plus de main.css
Une idée pourquoi?
<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>
Selon documents , la syntaxe de chargement d'un autre fichier dans un périphérique/une condition spécifique est la suivante:
<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" />
Cela ne chargera qu'un fichier css pour chaque montant de width
Notez bien que pour l'iPhone 4 et l'iPod touch de nouvelle génération dotés d'un écran Retina. La largeur de l'iPhone 4 correspond à 640
pixels que de nombreux développeurs ne la considèrent pas comme une largeur de navigateur mobile. Si vous ajoutez cette balise méta ci-dessous dans votre document, le problème sera résolu.
<meta name="viewport" content="width=320">
Cette balise méta aura un impact sur la qualité de vos images. Si vous voulez résoudre ce problème, vous devez lire ceci ici .
Il est difficile de savoir sans balises, mais je suppose que vous devriez faire quelque chose comme:
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)" />
Votre feuille de style mobile est chargée de façon conditionnelle, ce qui signifie que l'ordinateur chargera seulement le main.css
, tandis que l'iPhone chargera les deux main.css
et mobile.css
.
Si vous voulez recommencer à zéro lorsque vous chargez la page sur l'iPhone, ajoutez simplement ce morceau de CSS en haut de votre 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}
Il réinitialise efficacement le CSS.
@scott; vous devez peut-être définir votre mobile.css
après main.css
comme ceci:
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />
ou vous pouvez définir votre mobile css
dans votre main.css
comme ceci:
@media screen and (max-device-width: 480px){
body {
background: #ccc;
}
}
MODIFIER:
écrivez ce <!DOCTYPE html>
au lieu de <DOCTYPE html>
dans votre code HTML.