Menu
I'm making a theme for a site where I can't change the markup or include any JS. I can only control the CSS of my theme, and I can write some HTML inside the page body only.
I'm trying to make this theme responsive, but I can't see how to control initial-scale or page zoom on handheld devices without a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So what happens is that even though I can apply a mobile-specific layout through CSS @media queries, the site is zoomed out when viewed on a phone. Text and images are too small until you zoom in, and once you zoom in, the layout is too big and there's a horizontal scrollbar. It looks perfect inside a resized browser window on desktop; the issue is that the phone browser automatically scales the page.
So I'm seeking a workaround. I have two lines of thinking currently, and I'd welcome any other suggestions:
344
html { -moz-transform: scale(0.8, 0.8); zoom: 0.8; zoom: 80%; } This works in all browsers ...!!!!
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
There is @viewport, it might help you with that. But the support is very little. Have a look at this link http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
