[原]WebAPP开发之viewport的深入理解

标签: | 发表时间:2015-04-24 00:13 | 作者:woshiwanxin102213
出处:http://blog.csdn.net/woshiwanxin102213

平常移动端开发中,页面的head中都会引入下列这句话,那Viewport是什么,理解了这个才能让我们开发的网页更好适配不同的移动设备。

<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

Viewport是手机屏幕上能用来显示我们的网页的那一块区域。但是viewport并不等于浏览器的可视区域。可以自定义,自定义后,手机按这个尺寸的比例在可视区域缩放。

 手机的默认Viewport多大?手机屏幕可视区域区域有多大?

可能大家想到,应该是手机的分辨率!其实不是,大家都知道现在手机的分辨率参数,像iPhon 5S  1136*640,也就是说宽是640,iPhone6Plus是750,Android的也大概320到700多,那常用的PC屏幕分辨率一般1366*768,手机那么小的屏幕,怎么会有那么多的可显示区域。据说手机上为了获得更高的清晰度,有投影还是什么。

其实真实的设备可视区域像素宽度device-width,像iPhone5S,是320px,iPhone6Plus是375px,Android手机大多数是360px或348px和320px。

 大多数手机默认的viewport为980,若不加那句话,手机会按viewport为980来显示网页。如果咱们按640比例开发的网页,会变小。

 页面显示时,页面会根据设置的viewport放大或缩小屏幕,比如页面按宽为640px开发的页面,那放在viewport设置320的屏幕上,会放大一倍。

 平常开发中,如果Viewport设置为device-width,最好按320PX开发。但是像图片,为了防止虚化,真实尺寸最好大一些。

 各个参数说明

width

设置 layout viewport  的宽度,为一个正整数,

或字符串"width-device"

initial-scale

设置页面的初始缩放值,为一个数字,可以带小数

minimum-scale

允许用户的最小缩放值,为一个数字,可以带小数

maximum-scale

允许用户的最大缩放值,为一个数字,可以带小数

height

设置 layout viewport  的高度,这个属性对我们并不重要,很少使用

user-scalable

是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,

yes代表允许

 参考:http://www.cnblogs.com/2050/p/3877280.html(描述的很详细)

作者:woshiwanxin102213 发表于2015/4/23 16:13:05 原文链接
阅读:9 评论:0 查看评论

相关 [webapp 开发 viewport] 推荐:

[原]WebAPP开发之viewport的深入理解

- - woshiwanxin102213的专栏
平常移动端开发中,页面的head中都会引入下列这句话,那Viewport是什么,理解了这个才能让我们开发的网页更好适配不同的移动设备. Viewport是手机屏幕上能用来显示我们的网页的那一块区域. 但是viewport并不等于浏览器的可视区域. 可以自定义,自定义后,手机按这个尺寸的比例在可视区域缩放.

WebAPP ViewPort iPhone5 黑边解决方案

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

webkit webApp 开发技术要点总结

- - ITeye博客
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢. 幸好,webkit内核的浏览器能帮助我们完成这一切. 接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :. 对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,.

移动webapp开发小贴士

- - 移动开发 - ITeye博客
1 创建主屏幕图标 (Creating a home screen icon ,for ios). 2 启动画面图像 (Creating a splash screen, for ios). 3 全屏 (Making it full-screen, for ios)– 更像本地App. 4 改变状态栏 (Changing the phone status bar, for ios).

移动前端开发之viewport的深入理解

- - Web前端 - ITeye博客
转载自:http://www.cnblogs.com/2050/p/3877280.html. 移动前端开发之viewport的深入理解. 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备.

Moobile:基于 MooTools 框架实现的移动 WebApp 开发框架

- - 我爱水煮鱼
Moobile 是一个基于 MooTools 框架实现的移动 WebApp 开发框架,目前它主要在 iOS 设备的浏览器上实现原生应用的体验. Moobile 实现了很多类似 iOS 原生的控件,比如:工具栏,按钮,图片,列表,激活状态,幻灯片等等,它还实现了淡入淡出,幻灯片滑动,立体翻转等效果,还能显示类似原生的警告框.

webapp适配基准

- - 崔永键的博客
移动端网络流量已经超过pc. 基准a: android 4.x 占了60%左右,2.3x在30%左右. ios6.x的safari也占比很大. 基准b: 考虑一下 ios5. 基准c: 考虑下ios4,以及android2.x. 分辨率: 第一组 “520*xxx”以下的为一组, 第二组“640*xxx,800*xxx,720*xxx”等分为一组.

理解SVG的viewport,viewBox,preserveAspectRatio

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

非响应式设计的viewport

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

利用css @viewport 做设备适配

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