व्यूपोर्ट मेटा टैग

का उपयोग करके स्केल फिट मोबाइल वेब सामग्री मैं मोबाइल व्यूपोर्ट मेटा टैग का लाभ उठाने का प्रयास कर रहा हूं ताकि वेब पेज में फिट होने के लिए स्वचालित रूप से किसी HTML पृष्ठ की सामग्री को ज़ूम कर सकें।व्यूपोर्ट मेटा टैग

प्रतिबंध:

एचटीएमएल तय नहीं हो या आकार तत्वों (पूर्व img 640 की एक निश्चित चौड़ाई है)। दूसरे शब्दों में मैं सामग्री को द्रव होने और% का उपयोग करने के लिए मजबूर नहीं करना चाहता हूं।
मैं वेबव्यू के आकार पता नहीं है, मैं सिर्फ अपने पहलू अनुपात

उदाहरण के लिए पता है, अगर मैं एक ही छवि है (640x100px) मैं छवि जूम आउट करना चाहते हैं, तो वेबव्यू 300x250 है (फिट करने के लिए नीचे स्केल)। दूसरी ओर, यदि वेबव्यू 1280x200 है, तो मैं चाहता हूं कि छवि ज़ूम इन करें और वेबव्यू भरें (फिट करने के लिए स्केल करें)।

android docs और व्यूपोर्ट पर iOS docs पढ़ने के बाद, यह आसान लगता है: के बाद से मैं अपनी सामग्री (640) की चौड़ाई जानता हूँ कि मैं सिर्फ 640 को व्यूपोर्ट चौड़ाई सेट और वेबव्यू तय अगर यह सामग्री पैमाने की जरूरत है चलो या वेबव्यू फिट करने के लिए नीचे।

यदि मैं अपने एंड्रॉइड/आईफोन ब्राउज़र या 320x50 वेबव्यू में निम्नलिखित डालता हूं, तो छवि चौड़ाई फिट करने के लिए ज़ूम आउट नहीं होती है। मैं छवि को दाएं और बाएं स्क्रॉल कर सकता हूं ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640" /> 
    <style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     vertical-align: top; 
    } 

    h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
    { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-weight: normal; 
     font-style: normal; 
     font-size: 100%; 
     line-height: 1; 
     font-family: inherit; 
     vertical-align: top; 
    }  
    </style> 
    </head> 
    <body> 
    <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg"> 
    </body> 
</html>

मैं यहां क्या गलत कर रहा हूं? क्या व्यूपोर्ट मेटा टैग केवल उस सामग्री में ज़ूम करता है जो < वेबव्यू क्षेत्र है?

स्रोत

2012-01-04 rynop

आप अभी तक इस बात के लिए समाधान है? – Superbiji

अभी तक नहीं है। मुझे लगता है कि कोई आसान समाधान संभव नहीं है – rynop

शैली जोड़ने का प्रयास करें = "चौड़ाई: 100%;" आईएमजी टैग के लिए। इस तरह से छवि पृष्ठ की पूरी चौड़ाई भर जाएगी, इस प्रकार छवि को व्यूपोर्ट से बड़ा होने पर स्केलिंग हो जाएगी।

स्रोत

2012-01-10 20:49:44 AlexanderZ

हां, अगर सब कुछ तरल पदार्थ है तो समस्या हल हो जाती है, लेकिन मेरी दूसरी बुलेट के अनुसार: "मैं सामग्री को द्रव होने और% का उपयोग करने के लिए मजबूर नहीं करना चाहता हूं"। इसमें एक आइटम की गुच्छा के साथ एक संपूर्ण वेबसाइट के बारे में सोचें - divs, canvas, iframe, आदि ... मुझे पृष्ठ के साथ तय पता है - मैं चाहता हूं कि वेबव्यू बिल्कुल निश्चित चौड़ाई में ज़ूम इन/आउट करें। उल्लिखित करना। – rynop

छवि टैग में style="width:100%;max-width:640px" जोड़ना इसे व्यूपोर्ट चौड़ाई तक स्केल करेगा, यानी बड़ी खिड़कियों के लिए यह निश्चित चौड़ाई दिखाई देगा।

स्रोत

2012-02-07 12:53:48 Axel

स्केल अप नहीं है लेकिन –

मुझे लगता है कि इससे आपकी मदद करनी चाहिए।

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

मुझे बताएं कि यह काम करता है या नहीं।

पी/एस: यहां मानक उपकरणों के लिए कुछ मीडिया क्वेरी है। http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

स्रोत

2012-09-13 16:50:03

का विस्तार करें सरल और एक आकर्षण की तरह काम करता है –

और इसके साथ आप दृश्य विकार वाले उपयोगकर्ताओं के लिए असंभव में स्केलिंग अप/ज़ूमिंग करने जा रहे हैं, जो द्वारा चुने गए फ़ॉन्ट आकार में पढ़ने में सक्षम नहीं हैं आप। –

सिर में इस

//Include jQuery 
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<script type="text/javascript"> 
$(function(){ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    var ww = ($(window).width() < window.screen.width) ? $(window).width() : window.screen.width; //get proper width 
    var mw = 480; // min width of site 
    var ratio = ww/mw; //calculate ratio 
    if(ww < mw){ //smaller than minimum size 
    $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
    }else{ //regular size 
    $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
    } 
} 
}); 
</script>

स्रोत

2013-01-05 20:10:50 Bren1818

अच्छा, बस कुछ मोड और इसके अच्छे काम – waza123

अच्छा समाधान है, लेकिन मुझे लगता है कि व्यूपोर्ट मेटा टैग में एक टाइपो है। गुण सामग्री होना चाहिए, चौड़ाई नहीं, सही? –

Android के लिए जोड़ने के लक्ष्य घनत्व टैग के अलावा है।

target-densitydpi=device-dpi

तो, कोड की तरह

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />

कृपया ध्यान दें विचार करेंगे, मुझे विश्वास है कि यह इसके अलावा एंड्रॉयड के लिए ही है (लेकिन जब से तुम जवाब, मुझे लगा कि यह एक अच्छा अतिरिक्त था), लेकिन इस को अधिकतर मोबाइल उपकरणों के लिए काम करना चाहिए।

स्रोत

2013-07-22 14:13:37 Dave

धन्यवाद, सेटिंग लक्ष्य-densitydpi = 2 ने मेरी समस्या को जादू की तरह हल किया। –

लक्ष्य-घनत्व डीपी को वेबकिट से हटा दिया गया है http://trac.webkit.org/changeset/119527 –

मुझे आपकी जैसी ही समस्या थी, लेकिन मेरी चिंता सूची दृश्य थी। जब मैं सूची दृश्य स्क्रॉल करने का प्रयास करता हूं तो निश्चित हेडर भी थोड़ा सा स्क्रॉल करता है। समस्या व्यूपोर्ट दृश्य (ब्राउज़र) ऊंचाई से छोटी ऊंचाई सूची थी। आपको सामग्री टैग (सामग्री टैग के भीतर सूची दृश्य) ऊंचाई से कम अपनी व्यूपोर्ट ऊंचाई को कम करने की आवश्यकता है। यहां मेरा मेटा टैग है;

<meta name="viewport" content="width=device-width,height=90%, user-scalable = no">

उम्मीद है कि इससे मदद मिलेगी। धन्यवाद।

स्रोत

2014-03-26 07:35:25 shalin

ठीक है, यहाँ 100% देशी जावास्क्रिप्ट के साथ मेरा अंतिम समाधान है:

<meta id="viewport" name="viewport"> 

<script type="text/javascript"> 
//mobile viewport hack 
(function(){ 

    function apply_viewport(){ 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { 

     var ww = window.screen.width; 
     var mw = 800; // min width of site 
     var ratio = ww/mw; //calculate ratio 
     var viewport_meta_tag = document.getElementById('viewport'); 
     if(ww < mw){ //smaller than minimum size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw); 
     } 
     else { //regular size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
     } 
    } 
    } 

    //ok, i need to update viewport scale if screen dimentions changed 
    window.addEventListener('resize', function(){ 
    apply_viewport(); 
    }); 

    apply_viewport(); 

}()); 
</script>

स्रोत

2016-09-22 14:49:56 saike

व्यूपोर्ट मेटा टैग

उत्तर

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