स्क्रीन और मोबाइल स्टाइलशीट

मैंने इस प्रश्न पर स्टैक ओवरफ़्लो विषयों के साथ-साथ कुछ Google खोज परिणामों को देखा है लेकिन मैं अपनी समस्या को हल नहीं कर सकता।स्क्रीन और मोबाइल स्टाइलशीट

मैंने मोबाइल उपकरणों (मोबाइल.css) के लिए स्टाइलशीट बनाई है जो अनिवार्य रूप से मेरे मुख्य.css की एक प्रति है जो कई विशेषताओं में परिवर्तन के साथ है। जब मैं स्टाइलशीट के रूप में केवल मोबाइल.css लोड करता हूं तो यह मेरे आईफोन पर बहुत अच्छा लगता है, बस मैं इसे कैसे चाहता हूं। हालांकि जब मैं दोनों को डालता हूं, तो मुझे दोनों का मिश्रण मिल रहा है, लेकिन मुख्य.css

कोई विचार क्यों?

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

स्रोत

2011-09-20 xIlluzionx

आप "दोनों को कैसे डालते हैं"? – Blender

जब मैं इसे पोस्ट करता हूं तो मेरा कोड कुछ कारणों से नहीं दिख रहा है ... क्या आप इस स्रोत को देख सकते हैं: www.cuhvz.com/sandbox/home.php – xIlluzionx

इसे फिक्स्ड करें। यह अब काम करना चाहिए। – Blender

documents के अनुसार, विशिष्ट डिवाइस में एक और फ़ाइल लोड करने की वाक्य रचना/शर्त है इस तरह:

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

यहकी प्रत्येक राशि के लिए केवल एक सीएसएस फ़ाइल लोड करेगा

आईफोन 4 और नई पीढ़ी के आइपॉड स्पर्श के लिए रेटिना डिस्प्ले है जो आपको नोट करना चाहिए। आईफोन 4 चौड़ाई 640 पिक्सल है कि कई डेवलपर मोबाइल चौड़ाई के रूप में इस चौड़ाई को गिनते नहीं हैं। यदि आप इसे अपनी दस्तावेज़ समस्या में मेटा टैग के नीचे जोड़ते हैं तो

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

यह मेटा टैग आपकी छवियों की गुणवत्ता को प्रभावित करेगा। यदि आप उस समस्या को ठीक करना चाहते हैं तो आपको इस here के बारे में पढ़ने की आवश्यकता है।

स्रोत

2011-09-20 04:00:33 Mohsen

क्षमा करें, किसी भी कारण से मार्कअप में से कोई भी पोस्ट नहीं किया गया है, शायद मैं इसे कोड के रूप में प्रारूपित करना भूल गया था। (www.cuhvz.com/sandbox/home.php) – xIlluzionx

आपको 'media = "स्क्रीन और (न्यूनतम-चौड़ाई: 480 पीएक्स)" '' '' आपके मुख्य मेनस' – Mohsen

में जोड़ने की ज़रूरत है, जो आपने पहली बार काम किया था! – xIlluzionx

इसके किसी भी मार्कअप के बिना पता करने के लिए कठिन है लेकिन मैं अनुमान लगा रहा हूँ आप की तरह कुछ करना चाहिए:
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)" />

स्रोत

2011-09-20 03:59:42

@scott; हो सकता है आप main.css इस तरह के बाद अपने mobile.css परिभाषित करने के लिए है:

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

या आप परिभाषित कर सकते हैं अपने mobile css अपने main.css इस तरह में:

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

संपादित करें:

लिखने इस <!DOCTYPE html> अपने एचटीएमएल में <DOCTYPE html> के बजाय।

स्रोत

2011-09-20 04:01:55 sandeep

आपका मोबाइल स्टाइलशीट सशर्त भरी हुई है, जिसका अर्थ है कि कंप्यूटर केवलmain.css लोड होगा, जबकि iPhone दोनोंmain.css और mobile.css लोड होगा।

आप स्क्रैच से शुरू करने के लिए जब आप iPhone पर पृष्ठ लोड चाहते हैं, बस अपने 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}

इसे प्रभावी ढंग से सीएसएस रीसेट करता है।

स्रोत

2011-09-20 04:18:55 Blender

उत्तर

संबंधित मुद्दे