Viewport meta tag for desktop browsers?

问题

My client is asking me to reduce size of current website for desktop browsers by 30%.

is there a css or meta tag to do it like viewport meta tag on a mobile browser?

回答1:

You can look at the css screen media type.

It is:

Intended primarily for color computer screens.

You can use it this way:

@media screen {
  body { font-size: 70% }
}

There is also a handheld media type, primarily:

Intended for handheld devices (typically small screen, limited bandwidth).

However, you will need to test the different devices and desktops your client is focusing on in order to determine how using these media types will effect the user experience.

回答2:

Hmmm... I know this is an old question, but there is a MUCH better way to go about this: use the CSS scale() transform function on the <html> tag to scale EVERYTHING inside. Check out this jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/

The magic is all here:

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%;
}

回答3:

Odes is right.

@media screen {
  body { font-size: 70% }
}

But to make this really work well, you must use ems instead of px everywhere. That goes for margin and padding as well as width and height of all elements.

A good way to do this is to use SASS. Just create your own sass function to convert your px measurements into ems on the fly. Something like this will do:

@function em($px, $context: 16, $basesize: 16) {
  @return (($px/$basesize)/($context/16))+em;
}

Which then gets used in your CSS like so:

div { font-size:em(12); width: em(200,12); }

So, if the body font size was set to 100%, then the font size would be equivalent to 12px and the width of the div would be 200px wide.

回答4:

Here code for proportional scale and positioning, wnen using "transform: scale"

CSS

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+'%');

回答5:

You can enable the meta viewport tag on desktop with JS. First you should derive the setting (width) from the meta tag:

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);
  }
}

Then you need a little JS and the solution of Mike to get this working solution: http://codepen.io/anon/pen/GqoeYJ. Note that this example forces the width to be 1200 pixels, but initial-scale: 0.7 could be implemented in the same way.

来源：https://stackoverflow.com/questions/4787564/viewport-meta-tag-for-desktop-browsers

标签

browser

viewport