初次进入移动web开发的摸索

前言

初次进入移动web开发的摸索，发现前端开发这潭水愈发的深了！

下面从下面几个方面探讨移动web前端开发：分辨率、屏幕、手机浏览器、设计理念、响应式web开发。

分辨率

手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。我从两个方面进行思考：

1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。

2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。

屏幕

目前市场上的手机屏幕分为普通屏幕和视网膜屏幕两种。视网膜屏幕与普通屏幕最大的区别在于它的显示性能更优秀、图像更细腻。苹果公司从iphone4和new pad开始采用视网膜屏幕。

视网膜屏幕的评定指标是以像素密度超过300ppi为准。以iphone4为例，像素密度的计算方式如下：

1) 分辨率640:960 = 2:3

2) 勾股定理取对角线值，根号22+32 = 3.6

3) 像素密度 (960*3.6)/(3.5*3) = 326，其中3.5是屏幕尺寸，3是对应于960的最终值。计算过程中有误差，不必太在意。

视网膜屏幕的出现又带来了一个新的概念：“设备像素”。设备像素是要跟css像素做区分的。有关这方面的研究，您可以参考张鑫旭的这篇文章《视网膜New iPad与普通分辨率iPad页面的兼容处理》。里面的阐述很细致，我从中受益匪浅。

手机浏览器

浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器有：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。

设计理念（3S原则）

3S原则是指：Simple、Small、Speedy。这是国外一位大牛总结的，可以参见《Mobile Web Design: Best Practices》。对这三点，我深表认同。想说的是Speedy严格意义上应该算是结果，而不能归为原则。Web设计方面，我一直崇尚简约风格：便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等，当做到了这些，相信网站会变得Speedy。

移动web开发应该把手机的固有特性优先考虑。首先，手机屏幕相比桌面屏幕很小，所以满屏可显示的内容不多，这就要求我们在页面设计的时候选择好适当的字号，还得考虑文档内容的优先次序，把重要内容靠前显示；其次，手机的交互方式让我们得去重新考虑页面元素的设计。桌面web以鼠标操作为主，这样可操作的范围很精确，移动web以触控操作为主，手指的操作范围比较宽泛，反映在页面上，我以按钮为例，对于小屏幕低分辨率的手机来说，可以把按钮设置为.button{display:block;}，而对于大屏幕高分辨率的手机，可以设置为.button{display:inline-block;}，这是按钮。对于链接列表，要设置适当的行高，避免可点击的范围太小而操作失误；最后，图片。手机开发应尽量避免图片的使用，像圆角、阴影、渐变等以前在桌面不好实现的情况，在手机开发上已经不存在了，完全可以采用css3来实现，所以设计师在设计psd效果图的时候，就把效果做出来，但切图的时候就不必给出。

我觉得，所有的设计理念都是为了提升用户体验而提出的，当我们的目标群确定下来之后，如何提升用户体验，便是我们设计的出发点。

响应式web开发

这不是一项开创性的技术变革，但当我了解它之后还是觉得伊森·马科特很了不起。简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：

1) 移动web开发准备工作：

a) 插件安装：window resize。您可以通过以下链接https://chrome.google.com/webstore/search-extensions/window%20resize下载安装，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视口的大小提示。截图如下：

b) 编辑器安装：subline Text2（支持html5，安装css3扩展失败）、topStyle5（支持css3）。

c) 弄清视口和屏幕的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视口宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：

<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。

d) 响应式设计创意网站收集：http://mediaqueri.es。这里有很多响应式Web设计的网站，供您参考和学习。

2) 征途ING：

e) 响应式web设计之媒体查询：

为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：

@media screen and (max-width:960px){}

大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。

f) 响应式web设计之流式布局：

流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。

g) 响应式web设计之液态图片：

要实现液态图片，只需加入如下代码：img{max-width:100%;}

响应式web开发并不会很难，只是以前一个页面只需要美工给出一张效果图，现在要给出两张以上，这样一来，工作量相应地增加了许多。建议大家先有流式布局的思想，减少层级的嵌套。
懒人建站整理发布
 

web移动头部书写1

<meta http-equiv="Cache-Control" content="no-cache" />    
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />    
<meta name="apple-mobile-web-app-capable" content="yes" />     

 

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

 

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

 

这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

 

 

 

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

 

meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

 

<meta content="black" name=" apple-mobile-web-app-status-bar-style"   />

 

meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

 

<meta content="telephone=no" name="format-detection" />

 

meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

 

其他注意问题

 

1.在项目开发过程中可以会遇到内容排列排列显示的布局，建议你放弃float，可以直接使用display:block;

 

2.请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

 

3.学会使用webkit-box。

 

我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个 "webkit-box" 的值，它可以帮助前端工程师做到盒子模型灵活控制。

 

4、如何去除Android平台中对邮箱地址的识别 看过iOS webapp  API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平 台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的 邮件地址，你不妨加上这样一句meta标签在head中

 

<meta content="email=no" name="format-detection" />

 

5、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

 

setTimeout(scrollTo,0,0,0);

 

请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

 

6、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！至少Apple webapp  API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容 （也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。

 

7、如何检测用户是通过主屏启动你的webapp

 

看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphoneipodipod  touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点 击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直 接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，  我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主 屏这回事！

 

8、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize="off"来关闭键盘默认首字母大写。

 

缓存控制

<meta http-equiv="Cache-Control" content="no-cache"/>

<meta http-equiv="Cache-Control" content="max-age=300"/>

下面这行:

<meta http-equiv="Cache-Control" content="max-age=0"/>

与下面一行有相同的效果:

<meta http-equiv="Cache-Control" content="no-cache"/>

某些 WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种情况下, 解决方案是在服务器端的 HTTP 响应中设置 HTTP 头.

 

HTTP刷新

<meta http-equiv="Cache-Control" content="no-cache"/>

<meta http-equiv="refresh" content="15"/>

 

注意的是这个 XHTML MP 例子中需要 <meta http-equiv="Cache-Control" content="no-cache"/>. 如果上述代码没被包含, WAP 浏览器将仅仅显示缓存中的文档的复本, 而不需要每次刷新都连接服务器.

<meta http-equiv="refresh" content="15;URL=hello_world_example1.xhtml"/>

某些 WAP 浏览器是不支持 HTTP 刷新的. 例如, HTTP 刷新在 Openwave 移动浏览器 6.2.2 版上运行良好, 但在 Nokia 移动浏览器 4.0 版, Sony Ericsson T610 和 T68i 移动电话模拟器上是不起作用的.

注释

<meta name="author" content="mark"/>

 

clearType字体

<META HTTP-EQIV="cleartype" CONTENT="ON|OFF">
 

定义页面尺寸

IE的使用:<META NAME="MobileOptimized" CONTENT="240">

google搜索中知道这个可以解决flash不能全屏的问题,自己没遇到过。

其他使用:<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />