使用 viewport meta 标签在手机浏览器上控制布局

标签: 互联网 浏览器 | 发表时间:2012-01-27 00:46 | 作者:Denis
出处:http://fairyfish.net

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

Viewport 参考资料

Mozilla 开发者博客上有 viewport 使用教程
Apple 开发者站上面有 viewport 详细的描述
quirksmode.org 有 详细的 viewport 在各个手机浏览器不同之处介绍

>>> 继续阅读全文 ...


© 我爱水煮鱼 / 收藏本文 / 8条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [viewport meta 标签] 推荐:

使用 viewport meta 标签在手机浏览器上控制布局

- - 我爱水煮鱼
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分. 移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

Meta 透露元宇宙 AI 项目

- - 奇客Solidot–传递最新科技情报
Facebook 母公司Meta 首席执行官扎克伯格周三 表示,公司正在进行人工智能(AI)研究,以通过语音生成世界,改进人们与语音助手的聊天方式,并在不同语言之间进行翻译. 他勾勒出了建立元宇宙的关键步骤. 扎克伯格押注元宇宙将接替移动互联网. 元宇宙是一个未来主义的想法,即用户可以在其中工作、社交和游戏的虚拟环境.

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.

WebAPP ViewPort iPhone5 黑边解决方案

- - 大猫の意淫筆記
最好先仔细看一遍苹果官方文档  Configuring the Viewport. 容易被忽略的就是即使 width=640的时候,scale=1是按照device-width而不是按照640的大小. iPhone 的 device-width 等于320,如果我设置 width=640,scale=1.

利用css @viewport 做设备适配

- - 进步博客
在需要调整设备浏览器的viewport时,我们通常在HTML中使用来解决. 但是令人意想不到的是,viewport meta标签并不具有“规范性”,即它不是W3C的正式标准,也非Web标准. Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它.

Meta Watch通过FCC认证 售价199美金

- 乌鸦 - cnBeta.COM
感谢@Android安卓星空 .的投递. Android迷翘首以盼的Fossil Meta Watch是一拖再拖,今天外媒终于传来了好消息,这款手表已经通过了FCC的认证,接下来它就可以同步到您的Android智能手机或平板电脑了. 手表有两个版本,一个为指针式,有标准的旋钮以及两个小型OLED显示屏;另一个版本为数字式.

Meta开源JavaScript内存泄漏监测工具MemLab

- - 掘金 前端
上周,Facebook母公司Meta 宣布了开源 MemLab,一个基于 Chromium 的浏览器的 JavaScript 应用程序内存泄漏监测工具. 同时,Facebook 技术团队指出:“应用程序的性能和功能正确性问题通常会被用户立即留意到. 然而内存泄漏却不一样,它不容易被立即察觉,但它每次都会吃掉一大块内存,使得整个网络会话的响应变得非常慢.

Meta 宣布文本视频生成器 Make-A-Video

- - 奇客Solidot–传递最新科技情报
在文本图像生成器流行之后,Meta 宣布了文本视频生成器 Make-A-Video,可通过文本或图像提示生成视频内容. Meta 演示了利用一段文字描述或一幅静态图像生成视频的效果,比如一幅海龟图像在处理之后变成了海龟游泳视频. Make-A-Video 是基于现有的文本图像生成模型,如 OpenAI 的 DALL-E.

iPhone/android的viewport 解决网页自动缩放的问题

- - 快乐无极的博客
viewport有如下几个属性:. width设置viewport的宽度,即iphone最初模拟PC浏览器的宽度,之后iphone会这个宽度展现的页面同比缩放到iphone屏幕上. 设置width=device-width后就不会再进行缩放了,因为宽度正好和iphone的宽度相同(前提是没有设置缩放比例).