मेरी छवियों को मोबाइल साइट के लिए किस आकार का होना चाहिए

Question

हम मोबाइल साइट के लिए एक टेम्पलेट तैयार कर रहे हैं और हमें समस्या है जहां हमें नहीं पता कि लोगो का आकार क्या होना चाहिए, या पृष्ठभूमि, आदि

हम जेक्री मोबाइल एपीआई और एचटीएमएल 5/CSS3 का उपयोग करेंगे जो मूल रूप से आयामों के बारे में चिंता किए बिना साइट के पूरे आर्किटेक्चर को बनाने की अनुमति देता है, लेकिन पृष्ठभूमि और छवियों जैसी बाहरी संपत्तियों के संदर्भ में हम नहीं जानते कि सबसे अच्छा आकार क्या है अधिकांश उपकरणों के साथ अधिक संगत होने के लिए।

Answer 1

आईफोन 4 एस/5 में एक उच्च-रिज़ॉल्यूशन स्क्रीन है जो 640 पिक्सल चौड़ी है। कई एंड्रॉइड स्मार्टफोन 720px चौड़े पर शीर्ष पर हैं, हालांकि कुछ 800px तक जाते हैं। उस पर कुछ भी शायद एक टैबलेट माना जाता है।

सबसे अच्छी बात आप जहाँ तक विस्तृत अनुकूलता कर सकते हैं, तो, एक भी सीएसएस शैली है:

img { max-width: 100%; height: auto; } 

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

इसके अतिरिक्त, यदि आप फ़ोटो से निपट नहीं रहे हैं, तो आपको एसवीजी छवियों को देखना चाहिए। चूंकि वे वेक्टर-आधारित हैं, वे किसी भी संकल्प पर पूरी तरह से आकार बदलते हैं, और they're compatible with pretty much every browser except IE8 and Android 2.x।

Answer 2

आपको इसके लिए सीएसएस मीडिया प्रश्नों का उपयोग करना होगा। इस लेख यहां की एक नज़र डालें: http://davidwalsh.name/image-max-width

/* iphone */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     img { max-width: 100%; } 
} 

/* ipad */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
     img { max-width: 100%; } 
} 

Answer 3

निम्न HTML कोड पर विचार करें:

<img src="images/myimage.jpg" alt="image"> 

कि उदाहरण पर एक नज़र ले रहा है, हम स्क्रीन आकार के आधार पर एक से अधिक चित्रों की आवश्यकता होगी। चूंकि अधिकतर ब्राउज़र HTML दस्तावेज़ को पहले देखते हैं और जावास्क्रिप्ट लोड करने से पहले छवियों को प्रीलोड करते हैं, जावास्क्रिप्ट एक सही समाधान नहीं होगा।

यही कारण है कि: एक उत्तरदायी छवि सर्वर का उपयोग करें!

मैं का उपयोग किया है Sencha.io Src है, जो बाहर डिवाइस स्क्रीन लगाने और हटना होगा (यह केवल छवियों सिकुड़ता है) अपनी छवि को अपने screensize बाधाओं फिट करने के लिए। Sencha.io अपने डेटाबेस में डिवाइस को देखने के लिए ब्राउज़र उपयोगकर्ता सामग्री स्ट्रिंग का उपयोग करता है। इससे आपकी छवि की अधिकतम चौड़ाई तक आपकी छवि कम हो जाती है और इसे कैश में संग्रहीत किया जाता है जो 30 मिनट के लिए उपलब्ध होगा।

है जैसे उसे किसी का उपयोग करें:

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image"> 

पुनश्च: यह भी यह shortcomes है: यह एक तीसरी पार्टी के माध्यम से पर डिवाइस का पता लगाने निर्भर करता है और आपके सभी चित्रों को मार्ग की आवश्यकता है। लेकिन इस समय वे कोई महान समाधान नहीं कर रहे हैं (यहां तक ​​कि मीडिया प्रश्नों के साथ आपको ब्राउज़र से निपटना होगा, जो मीडिया क्वेरी के अंदर संसाधन डाउनलोड करता है जो लागू नहीं होता है) - मुझे आशा है कि इससे आपकी मदद मिलेगी!

Answer 4

मुझे यकीन है कि छवि का आकार आमतौर पर सीएसएस मीडिया क्वेरी स्टैंडर्ट को परिभाषित करने जैसा नहीं होना चाहिए।

यह 2015-2016 के सबसे लोकप्रिय उपकरणों के लिए सीएसएस मीडिया क्वेरी की एक छोटी सूची है।

यदि आपको आवश्यकता हो तो नए उपकरणों के लिए बस इस सूची में मीडिया क्विर्स जोड़ें।

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

और भी बड़े सूचियों पर एक नज़र डालें https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ और https://gist.github.com/hs0ucy/3762901