मेरा ग्राहक मुझे डेस्कटॉप ब्राउज़र के लिए 30% तक वर्तमान वेबसाइट के आकार को कम करने के लिए कह रहा है।व्यूपोर्ट मेटा टैग?
क्या मोबाइल ब्राउज़र पर व्यूपोर्ट मेटा टैग की तरह ऐसा करने के लिए कोई सीएसएस या मेटा टैग है?
आप सीएसएस screenmedia type देख सकते हैं।
यह है:
रंग कंप्यूटर स्क्रीन के लिए मुख्य रूप से लक्षित है।
आप इसे इस तरह से उपयोग कर सकते हैं:
@media screen {
body { font-size: 70% }
}
वहाँ भी, एक handheld मीडिया प्रकार मुख्य रूप से:
हैंडहेल्ड डिवाइस (आमतौर पर छोटे परदे, सीमित बैंडविड्थ) के लिए लक्षित है।
हालांकि, इन मीडिया प्रकारों का उपयोग करने के तरीके को उपयोगकर्ता अनुभव को प्रभावित करने के लिए आपको अपने डिवाइस पर ध्यान केंद्रित करने वाले विभिन्न डिवाइस और डेस्कटॉप का परीक्षण करने की आवश्यकता होगी।
आपके लिए धन्यवाद इनपुट। इसे क्रोम, यानी, और फ़ायरफ़ॉक्स पर आज़माया। उनमें से कोई भी काम नहीं किया। मैंने अपनी सीएसएस को अपनी सीएसएस फ़ाइल में रखा है। क्या मुझे कुछ और करने की ज़रूरत है? – Moon
@Moon - मैंने बस इसका उपयोग करने के तरीके के बारे में एक उदाहरण दिया है। आपको अभी भी उचित शैलियों को जोड़ने की जरूरत है। – Oded
हमम ... मुझे पता है कि यह एक पुराना सवाल है, लेकिन इसके बारे में जाने के लिए बहुत बेहतर तरीका है: सीएसएस scale()<html> टैग पर फ़ंक्शन को बदलने के लिए प्रत्येक चीज़ को स्केल करने के लिए उपयोग करें। इस jsFiddle की जाँच करें: http://jsfiddle.net/mike_marcacci/6fMnH/
जादू सब यहाँ है:
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
यह वास्तव में प्रश्न का उत्तर देता है। अन्य उत्तरों मुख्य रूप से इंगित करते हैं कि यह समस्या को हल करने का सबसे अच्छा तरीका नहीं हो सकता है। – Kokodoko
Odes सही है।
@media screen {
body { font-size: 70% }
}
लेकिन यह वास्तव में अच्छी तरह से काम करने के लिए, आपको हर जगह पीएक्स के बजाय ईएमएस का उपयोग करना होगा। यह मार्जिन और पैडिंग के साथ ही सभी तत्वों की चौड़ाई और ऊंचाई के लिए जाता है।
ऐसा करने का एक अच्छा तरीका SASS का उपयोग करना है। अपने पीएक्स माप को फ्लाई पर ईएमएस में बदलने के लिए बस अपना स्वयं का सास फ़ंक्शन बनाएं। कुछ इस तरह करना होगा:
@function em($px, $context: 16, $basesize: 16) {
@return (($px/$basesize)/($context/16))+em;
}
कौन सा तो की तरह अपने सीएसएस में इस्तेमाल किया जाता है:
div { font-size:em(12); width: em(200,12); }
तो, अगर शरीर फ़ॉन्ट आकार 100% पर सेट किया गया था, तो फ़ॉन्ट आकार बराबर होगा 12px तक और div की चौड़ाई 200px चौड़ी होगी।
यहाँ आनुपातिक पैमाने और स्थिति के लिए कोड का उपयोग कर "परिणत: पैमाने" wnen
सीएसएस
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
जे एस
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale);
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
आप जे एस के साथ डेस्कटॉप पर मेटा व्यूपोर्ट टैग सक्षम कर सकते हैं ।सबसे पहले आप मेटा टैग से सेटिंग (चौड़ाई) प्राप्त करना चाहिए: http://codepen.io/anon/pen/GqoeYJ:
var viewportcontent = $("#myviewport").attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
तो फिर तुम इस काम के समाधान प्राप्त करने के लिए एक छोटे से जे एस और माइक के समाधान की जरूरत है। ध्यान दें कि यह उदाहरण चौड़ाई को 1200 पिक्सल तक मजबूर करता है, लेकिन उसी तरह लागू किया जा सकता है।
आप 'ज़ूम' सीएसएस संपत्ति की तलाश में हैं। यहां वर्णित, http://stackoverflow.com/a/1156526/368691। – Gajus
आप इस जेएस समाधान के साथ डेस्कटॉप पर मेटा व्यूपोर्ट टैग (चौड़ाई) को सक्षम कर सकते हैं: http://stackoverflow.com/questions/37762579/get-meta-viewport-tag-to-work-on-desktop – JoostS