移动Web页面,为什么都喜欢width=device-width,并且关闭系统缩放功能?

如题,这种方式做的移动Web页面,设计稿通常是按照960*640的规格进行设计,再开发的时候,通常会把里面量到的尺寸缩小一半再开发。

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

那既然要缩小一半再开发,为什么不直接设置width=640,然后按照设计稿的尺寸进行开发呢?

对于第一种方法,我暂时能想到好处之后图片缩小了一半,不知道还有什么其他原因促使大家去用width=device-width

这涉及到了移动设备(ios, android)的屏幕尺寸问题,device-width指的是设备的物理宽度,width是页面宽度,这么做是为了兼容更多的设备,当然只通过viewport标签还是不够的,还需要配合Media Query进行响应式设计。

这儿有两篇之前翻译的关于viewport的文章,希望有帮助:
http://weizhifeng.net/viewports.html
http://weizhifeng.net/viewports2.html

在网页的<head>中增加这句话,可以让网页的宽度自动适应手机屏幕的宽度。 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 minimum-scale=0.5:表示最小的缩放比例 maximum-scale=2.0:表示最大的缩放比例 user-scalable=yes:表示用户是否可以调整缩放比例

手机的屏幕肯定有各种分辨率如果单纯固定死640的话,你就看不到其他手机分辨率的效果了

自适应网页设计参考 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

视网膜屏幕的分辨率比如 960*640 , 并非所有屏幕都是视网膜屏幕, 比如iPhone3GS的分辨率就是480*320

为了让页面在两者都可以正常显示,所以视网膜屏幕主机的浏览器会做一些 "特殊的动作"(比如如果你什么也不做,就只是设个宽度,你会发现结果出乎你意料,建议你在iPhone4S试一下,它的分辨率刚好是960*640,但是你不加Meta画一个96*640的div试试) .

真正的原因是一份标签适应960*640和480*320以及其他(比如电脑,有时候会用电脑或iPad浏览手机网页)

你可以在页面里写一个js计算浏览器渲染的宽度,你会发现iphone浏览器认为自己的宽度只有320px

width=device-width,字体大小才会适合阅读。你用手机访问一些网站的时候,看到的页面和电脑上一样,字体非常小,需要缩放才能看清,这种就是没加width=device-width的。

如果布局、字体都没什么问题,缩放也不是很有必要了。

时间: 2024-10-20 17:08:05

移动Web页面,为什么都喜欢width=device-width,并且关闭系统缩放功能?的相关文章

分享:IT管理员都喜欢用的Outlook超大附件系统

IT管理员应该如何选择合适的Outlook超大附件解决方案?借由一个故事回答这个问题. "张小明,50M的附件公司邮箱又发不了了,耽误给客户发资料了,你过来帮我看看".这已经是IT管理员张小明,今天第五次收到业务部门同事的吐槽+求助了. "张小明,Outlook发送超大附件有解决方案了吗?我看单纯解除附件大小限制,服务器顶不住啊--"刚帮同事处理好问题,顶头boss就来关照. 众所周知为了缓解Exchange服务器压力,Outlook附件大小一般限制在20M.各种打

移动web页面头部书写

HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用户代理行为的编译.编译的值取content 里的内容.简单来说即可以模拟 HTTP 协议响应头.最常见的大概属于Content-Type了,设置编码类型.如 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> H5中可以简化为 <me

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预

[转]移动端web页面使用字体的思考

一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番. 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体,为了满足

web页面嵌入excel(一)

写这篇文章之前,先提几个问题,希望高手留言指点.讨论: 1. 水晶报表(Crystal Reports)的表头能不能冻结,即:记录多的时候,记录翻页而报表的头部持久显示:如果能怎么实现. 2. 水晶报表在设计的时候表头字段是拖上去的,如果要做一个报表定制工具,这个表头能用程序控制吗?(非vs2005自带的水晶报表) 3. OWC组建在用vs2005做Web开发的时候为什么添加不到工具栏,而vs2003可以,vs2005的Winform程序也可以. 正是前面提到的问题1和问题2无法解决,现在要把整

移动端Web页面问题(转载)

1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2.现在android比较乱,有1.5的,有2的也有3的. 想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍).

base64:URL背景图片与web页面性能优化

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么? 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码: thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),就

js在web页面上绘制圆形

在web页面上,想要画出一个圆形,方法有很多,SVG.canvas都可以绘图.但是本文不采用这两种方式,而是使用一个div.div一般是一个矩形,但是如果设置一个圆角样式border-radius就可以将div变成圆形. 圆的位置需要在画布中绝对定位(position: absolute),也就是通过设置X.Y坐标在定位,对应的css样式是left.top.想要圆的绝对定位起效,画布就要设置position:relative. <!DOCTYPE html> <html> <

前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 (三)我的工具页面布局 如图: 首先将其分为二部分: 第一部分是上方整体红色方框区域: 包含若干个独立按钮,按钮