动态缩放页面的最佳方式?

发布于 2024-10-14 11:21:20 字数 139 浏览 1 评论 0原文

我想知道你们会推荐什么作为最有效的想要根据分辨率动态调整网站的大小?

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

I was wondering what you guys and gals would recommend as the most efficient want to dynamically rescale a website based on resolution?

Is there anything that rescales elements AND images?
Or do I need to do those separately?
I've been trying to use percentages and em's, but it seems like a huge hassle. Are there any scripts?
I've been searching for quite a while and haven't found anything that quite fits yet.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

黑白记忆 2024-10-21 11:21:20

新的媒体查询登陆CSS3< /代码> 规范。您可以阅读有关该主题的精彩文章来自A List Apart 杂志(带有示例,尝试调整浏览器窗口大小)

还有现有的

New Media Queries are landed in CSS3 specification. You can read an awesome article on the subject from A List Apart Magazine (with example, try resizing your browser window)

There are also existing scripts of course.

南风起 2024-10-21 11:21:20

检测设备方向的最佳方法是使用元标记。 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 属性确定网页是否以全屏模式显示。

The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari/chrome on the iPhone and iPad to determine how to display a web page. Following are the properties of the viewport

The viewport width to the width of the device by adding the following declaration to the head of your HTML file

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

To set the initial scale to 1.0, add this to the head of your HTML file:

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

To set the initial scale and to turn off user scaling, add this to the head of your HTML file:

Utilize the viewport meta tag to improve the presentation of your mobile browser. This meta tag sets the width and initial scale of the viewport. Add the appropriate viewport meta data to the head of the document to instruct the browser to present your content in as large a context as possible on the device’s screen. If you don’t set the viewport width, the page will be zoomed way out when it first loads.

Full Screen Mode

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

If content is set to yes the web application runs in full-screen mode; otherwise, it does not. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文