动态缩放页面的最佳方法？

Question

我想知道你们和gals会推荐什么作为最有效的想要根据分辨率动态重新缩放网站？

有什么东西可以重新调整元素和图像吗？ 或者我需要单独进行这些操作吗？ 我一直在尝试使用百分比和em，但这似乎是一个巨大的麻烦。有脚本吗？ 我已经找了很长一段时间，但还没找到任何适合的东西。

Answer 1

新 Media Queries 以CSS3规范登陆。您可以从 A List Apart Magazine （使用 article 阅读有关该主题的精彩 example ，尝试调整您的大小浏览器窗口）

当然还有scripts。

Answer 2

检测设备方向的最佳方法是使用元标记。视频元标记由iPhone和iPad上的Safari / chrome使用，以确定如何显示网页。以下是视口的属性

通过将以下声明添加到HTML文件的头部来将视口宽度设置为设备的宽度

<meta name="viewport" content="width=device-width">

要将初始比例设置为1.0，请将其添加到HTML文件的开头：

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

要设置初始比例并关闭用户缩放，请将其添加到HTML文件的开头：

利用视口元标记来改进移动浏览器的显示效果。此元标记设置视口的宽度和初始比例。将适当的视口元数据添加到文档的头部，以指示浏览器在设备的屏幕上尽可能大的上下文中显示您的内容。如果未设置视口宽度，则页面将在首次加载时缩小。

全屏模式

<meta name="apple-mobile-web-app-capable" content="yes">

如果内容设置为yes，则Web应用程序以全屏模式运行;否则，它没有。您可以使用window.navigator.standalone只读布尔值JavaScript属性确定网页是否以全屏模式显示。