Viewport meta tag for desktop browsers?

前端未结

关注

 5  655

爱一瞬间的悲伤

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?

相关标签:

5条回答

迷失自我

2020-12-31 08:08

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

0 讨论(0)

醉酒成梦

2020-12-31 08:11
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2020-12-31 08:23
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2020-12-31 08:23
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
野的像风

2020-12-31 08:31
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%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...