Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a meta tag or something for desktops that works like viewport initial-scale?

I know you're thinking that this is a strange request, however I am currently dealing with a client that gave me a template and decided he wanted it 70% smaller after seeing it in a browser and all the HTML done (!!!!). Thus throwing all the work that was done for both of us out the window. If I could adjust the scale to 0.7 (70%) that would be perfect and the project can still roll out the way it was going. Thank you!

like image 451
Xeo Avatar asked Sep 15 '11 14:09

Xeo


People also ask

What is meta viewport tag?

The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you're not actually changing your site's design for mobile, and it renders better with a larger or smaller virtual viewport.

Has a meta name viewport tag with width or initial scale?

Using the viewport meta tag lets you set the width and scaling of the viewport so that it's correctly sized on all devices, particularly mobile devices. Not using the viewport meta tag can make your website difficult to read, and also potentially add a significant delay on mobile browsers, impacting First Input Delay.

Do I need a viewport meta tag?

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

Where do I put meta viewport tag?

Generally, meta elements (including viewport) should be placed in the document's <head> . CSS rules should either be added to a CSS stylesheet and referenced with a <link> element or, if you're not using stylesheets for some reason, in a <style> element (also in the document's <head> ).


2 Answers

body {
zoom: 0.7;
transform: scale(0.7);
transform-origin:0 0;
-ms-transform: scale(0.7);
-ms-transform-origin:0 0;
-moz-transform: scale(0.7);
-moz-transform-origin: 0 0;
-o-transform: scale(0.7);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.7);
-webkit-transform-origin: 0 0;
}
like image 125
SeventotheSeven Avatar answered Oct 05 '22 23:10

SeventotheSeven


You might be able to use the CSS Zoom property but negativly? - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting).

Firefox is the only major browser that does not support Zoom (Check here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.

So you could use:

div.zoomed { zoom: 70%; -moz-transform: scale(.7); }
like image 24
Graeme Leighfield Avatar answered Oct 05 '22 22:10

Graeme Leighfield