All geek questions in one place

CSS page zoom / scaling

I am creating a theme for a site where I cannot change the markup or enable JS . I can only control the CSS of my theme, and I can only write html inside the body of the page.

I'm trying to make this theme responsive, but I can't figure out how to control zooming at the entry level or page on portable devices without a view type meta tag, for example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

So what happens is that even if I can apply the layout for mobile devices using CSS @media requests, the site will be reduced when viewed on the phone. Text and images are too small until you zoom in, and as soon as you zoom in, the layout will be too large and there will be a horizontal scroll bar. It looks great inside a modified browser window on the desktop; the problem is that the phone browser automatically scales the page.

So I'm looking for a workaround. I currently have two thoughts, and I would welcome any other suggestions:

  • Is there a way to do what the viewport meta tag does only in CSS?
  • Can I use the maximum page width in my style for mobile devices so mobile browsers do not scale the page?
+6
source share
1 answer

There is @viewport , this can help you with this. But there is very little support. Have a look at this link http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

+1
source

Source: https://habr.com/ru/post/925362/

More articles:


All Articles