Ove*_*ode 5 html javascript css jquery
当我在手机上查看我的网站时,我可以阻止它调整大小/缩放
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
但是,我希望能够调整大小,但是可能会保留一些固定比例的元素吗？
基本上,如果我有
<header>stuff</header>
<div id="content">
Content
</div>
当我放大手机时,"内容"会正常放大,但标题会保持固定大小.标题的字体大小相同,外观相同等.
有太多的文字让我考虑使用图像作为替代选项.
基本上,我想user-scalable=no对特定元素有所帮助.
JS/jQuery方法都可以,是的,我知道其中一个解决方案是手动调整所有内容,或者将所有内容都设为百分比,但这很难看,而不是我正在寻找的内容.
使用 iframe 相当笨重，但可以解决您的问题:) 毕竟它们是 HTML5 规范的一部分。
您应该能够将不同的视口属性应用于单独的文档 - 考虑带有内容标题和内容iframe 的 html：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<header>stuff that you want to be "fixed"</header>
<!-- #content document will have different viewport meta applied
it should also be sized appropriately -->
<iframe id="content" />
</body>
</html>
与我最初的建议（将标题和内容设置为容器 html 内的单独 iframe）相比，这似乎是一个更有吸引力的选择。