wake-up-neo.net

Bildschirm- und mobile Stylesheets

Ich habe die Stack-Overflow-Themen zu dieser Frage sowie einige Google-Suchergebnisse durchgesehen, aber ich kann mein Problem nicht lösen.

Ich habe ein Stylesheet für mobile Geräte (mobile.css) erstellt, bei dem es sich im Wesentlichen um eine Kopie meiner main.css mit Änderungen an vielen Attributen handelt. Wenn ich nur mobile.css als Stylesheet lade, sieht es auf meinem iPhone so aus, wie ich es möchte. Wenn ich jedoch beides einsetze, bekomme ich eine Mischung aus beiden, aber mehr von main.css

Irgendeine Idee warum?

<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>
cssmobilescreenstylesheet
19
xIlluzionx

Gemäß documents lautet die Syntax des Ladens einer anderen Datei in einem bestimmten Gerät/Zustand wie folgt:

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

Dadurch wird nur eine CSS-Datei für jeden einzelnen Betrag von width geladen. 

Für iPhone 4 und iPod touch der neuen Generation, die ein Retina-Display besitzen, sollten Sie etwas beachten. Die Breite des iPhone 4 ist 640 Pixel, die viele Entwickler nicht als mobile Browserbreite zählen. Wenn Sie dieses Meta-Tag in Ihr Dokument einfügen, wird das Problem gelöst

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

Dieses Meta-Tag wirkt sich auf die Bildqualität aus. Wenn Sie dieses Problem beheben möchten, müssen Sie dies hier hier nachlesen.

31
Mohsen

Ohne Markup ist es schwer zu wissen, aber ich schätze, Sie sollten so etwas tun:
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
James Khoury

Ihr mobiles Stylesheet wird nur bedingt geladen. Dies bedeutet, dass der Computer nur den main.css lädt, während das iPhone beide main.css und mobile.css lädt.

Wenn Sie beim Laden der Seite auf dem iPhone noch einmal von vorne anfangen möchten, fügen Sie diesen CSS-Teil ganz oben in Ihren mobile.css ein:

/*
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}

Es setzt effektiv das CSS zurück.

0
Blender

@ scott; Möglicherweise müssen Sie Ihren mobile.css nach main.css folgendermaßen definieren:

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

oder Sie können Ihren mobile css in Ihrem main.css folgendermaßen definieren:

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

BEARBEITEN:

schreiben Sie diesen <!DOCTYPE html> anstelle von <DOCTYPE html> in Ihre HTML-Datei.

0
sandeep