Pantalla y hojas de estilo para dispositivos móviles

He examinado los temas de desbordamiento de pila en esta pregunta, así como algunos resultados de búsqueda de Google pero parece que no puedo resolver mi problema.Pantalla y hojas de estilo para dispositivos móviles

He creado una hoja de estilo para dispositivos móviles (mobile.css) que es esencialmente una copia de mi main.css con cambios en muchos de los atributos. Cuando cargo solo mobile.css como la hoja de estilos, se ve muy bien en mi iPhone, justo como lo quiero. Sin embargo cuando puse ambos, obtengo una mezcla de ambos, pero más de los main.css

¿Alguna idea de por qué?

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

Fuente

2011-09-20 xIlluzionx

¿Cómo "pones ambos"? – Blender

Mi código no se muestra por alguna razón cuando lo publiqué ... ¿Podría ver la fuente en: www.cuhvz.com/sandbox/home.php – xIlluzionx

Se arregló. Debería funcionar ahora. – Blender

Según documents, la sintaxis de cargar otro archivo en el dispositivo específico/condición es como este:

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

Esto cargará solo un archivo css por cada cantidad de width

Para iPhone 4 y iPod touch de nueva generación que tienen pantalla Retina hay algo que debe tener en cuenta. El ancho del iPhone 4 es 640 píxeles que muchos desarrolladores no cuentan este ancho como el ancho de un navegador móvil. Si se agrega esto a continuación etiqueta meta en su problema será resuelto documento

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

Esta etiqueta meta tendrá un impacto en la calidad de las imágenes. Si desea solucionar ese problema, debe leer sobre este here.

Fuente

2011-09-20 04:00:33 Mohsen

Disculpe, ninguna de las marcas publicadas por alguna razón, quizás olvidé formatearla como código. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

Necesita agregar la pantalla 'media =" y (min-width: 480px) "' a su 'main.css' – Mohsen

¡Lo primero que dijo funcionó! – xIlluzionx

Es difícil saber sin ningún marcado pero supongo que debe hacer algo como:
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)" />

Fuente

2011-09-20 03:59:42

Disculpe, ninguna de las marcas publicadas por alguna razón, tal vez olvidé formatearla como código. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

@scott; puede ser que usted tiene que definir su mobile.css después main.css así:

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

o puede definir su mobile css en su main.css así:

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

EDIT:

escribir este <!DOCTYPE html> en lugar de <DOCTYPE html> en su html.

Fuente

2011-09-20 04:01:55 sandeep

su hoja de estilos móvil se carga de forma condicional, lo que significa que el ordenador cargará solamente la main.css, mientras que el iPhone se carga tanto main.css y mobile.css.

Si desea empezar de cero cuando se carga la página en el iPhone, sólo tiene que añadir este trozo de CSS a la parte superior de su 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}

restablece eficazmente el CSS.

Fuente

2011-09-20 04:18:55 Blender

Pantalla y hojas de estilo para dispositivos móviles

Respuesta

Cuestiones relacionadas