Fogli di stile dello schermo e dei dispositivi mobili

Ho esaminato gli argomenti di overflow dello stack su questa domanda, nonché alcuni risultati di ricerca di Google, ma non riesco a risolvere il mio problema.Fogli di stile dello schermo e dei dispositivi mobili

Ho creato un foglio di stile per dispositivi mobili (mobile.css) che è essenzialmente una copia del mio main.css con modifiche a molti degli attributi. Quando carico solo mobile.css come foglio di stile, sembra fantastico sul mio iPhone, proprio come lo voglio. Tuttavia quando inserisco entrambi, sto ottenendo un mix di entrambi, ma più del main.css

Qualche idea sul perché?

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

fonte

2011-09-20 xIlluzionx

Come si "inserisce entrambi"? – Blender

Il mio codice non viene visualizzato per qualche motivo quando l'ho postato ... Puoi guardare la fonte all'indirizzo: www.cuhvz.com/sandbox/home.php – xIlluzionx

Risolto il problema. Dovrebbe funzionare ora. – Blender

Secondo documents, la sintassi di caricare un altro file nel dispositivo specifico/condizione è In questo modo:

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

Questo caricherà solo un file css per ogni singola quantità di width

Per iPhone 4 e iPod touch di nuova generazione dotati di display Retina, è necessario fare attenzione. La larghezza dell'iPhone 4 è 640 pixel che molti sviluppatori non contano questa larghezza come larghezza del browser mobile. Se aggiungi questo meta tag nel tuo documento, il problema verrà risolto

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

Questo metatag influenzerà la qualità delle immagini. Se si desidera risolvere il problema, è necessario leggere questo here.

fonte

2011-09-20 04:00:33 Mohsen

Spiacente, nessuno dei markup è stato pubblicato per qualche motivo, forse ho dimenticato di formattarlo come codice. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

Devi aggiungere lo schermo 'media =" e (min-width: 480px) "' al tuo 'main.css' – Mohsen

Fare la prima cosa che hai detto funzionasse! – xIlluzionx

La sua difficile sapere senza alcun markup ma credo si dovrebbe fare qualcosa di simile:
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)" />

fonte

2011-09-20 03:59:42

Spiacente, nessuno dei markup è stato pubblicato per qualche motivo, forse ho dimenticato di formattarlo come codice. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

@scott; può essere è necessario definire il vostro mobile.css dopo main.css come questo:

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

oppure è possibile definire il mobile css nella vostra main.css come questo:

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

EDIT:

scrittura questo <!DOCTYPE html> invece di <DOCTYPE html> nel tuo html.

fonte

2011-09-20 04:01:55 sandeep

Il telefono foglio di stile viene caricato in modo condizionale, il che significa che il computer caricherà solo il main.css, mentre l'iPhone caricherà siamain.css e mobile.css.

Se si vuole iniziare da zero quando si carica la pagina su iPhone, basta aggiungere questo pezzo di CSS per la parte superiore del vostro 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}

Si ripristina in modo efficace il CSS.

fonte

2011-09-20 04:18:55 Blender

Fogli di stile dello schermo e dei dispositivi mobili

risposta

Problemi correlati