Html 在 CSS 中设置移动页面缩放/缩放
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12415799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set mobile page scale/zoom in CSS
提问by tuff
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.
我正在为一个无法更改标记或包含任何 JS的网站制作主题。我只能控制我的主题的 CSS,我只能在页面正文中写一些 html。
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.
因此,即使我可以通过 CSS @media 查询应用特定于移动设备的布局,但在手机上查看时该站点还是会缩小。文本和图像在放大之前太小,一旦放大,布局太大并且有一个水平滚动条。它在桌面上调整大小的浏览器窗口中看起来很完美;问题是手机浏览器会自动缩放页面。
So I'm seeking a workaround. I have two lines of thinking currently, and I'd welcome any other suggestions:
所以我正在寻找一种解决方法。我目前有两种想法,我欢迎任何其他建议:
- Is there any way to do what the viewport meta tag does in CSS alone?
- Can I force a max page width in my mobile-specific styling so that mobile browsers will not scale the page?
- 有什么办法可以单独在 CSS 中完成视口元标记的作用吗?
- 我可以在我的移动特定样式中强制设置最大页面宽度,以便移动浏览器不会缩放页面吗?
采纳答案by Zendy
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/
有@viewport
,它可能会帮助你。但是支持很少。看看这个链接http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/