无线列表html,无线web 开发经验（2）—— HTML

meta标签

meta标签，这些meta标签在开发webapp时起到非常重要的作用

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

其中：

width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。

最佳实践：

一般情况下，在所有无线页面的头部，都要加上此viewport的设置，如果不加上此数值，会造成在某些webkit游览器中，游览器会根据自身的某些判断，自行做放大、缩小等，造成页面无法正常访问，特别是某些app中嵌入了webkit游览器来进行访问的时候， 会出现以上所说的情况，因此为了保证你说设计的网页在所有手机中显示保持一致，加上此设置

viewport中的设置数值一般不需要进行修改，因为现在的数值已经满足了绝大多数项目，当然会出现在非常特殊的页面里，需要用户进行手动缩放的操作，不过如果修改了数值，需要在不同的手机上进行详细的测试，否则会有你预期外的事情发生。

HTML5的标签使用

在无线Web的开发中，大家会经常使用HTML5的tag标签，对于HTML5的大多数标签使用起来不会遇到问题， 比如说nav、footer、article等标签，这些展示型的标签一般可以安全使用，如果不是非常确定某个HTML5标签是否可以使用，建议参考 http://caniuse.com/。

input标签

此类标签是非常特殊的标签，因为这个是和用户交互最紧密的一类标签，也是问题最多的一类标签。 IOS和Android在HTML5标签上最大的区别莫过于input类型的标签，并且不同Android机对于input类型的实现也大有不同，同时不同的类型的input，会弹出不同的键盘类型，特别是ios。一般在开发过程中常常会碰到需要弹出键盘的需求，以下可以做参考。这些控件的一个比较重要的特点是交互界面由浏览器实现，无法通过css、html来进行定制，因此对于日常评审交互搞、视觉稿的需求的时候，一定要非常谨慎，可能多一个逗号，都是修改不了的。 下面列出比较保险的几个类型：

text:文本 此类型说明输入框为文本信息,对应的键盘而言，Android和ios都会弹出全键盘。

passsword：密码 在手机上和PC上的交互有所不同，这个需要注意

button、checkbox、radio、reset、submit等 这些控件都可以使用，不过需要注意在Android和ios的手机上，控件的样式会所有不同，如果想完全掌控样式，需要reset一下-webkit-appearance:none，之后在设置自己需要的样式。

需要谨慎使用的类型：

email、search、tel、url等类型，这些标签的外观和text类型一致，除了search，会有圆角。最主要的区别在于弹出的键盘，对于ios而言，由于其html5规范支持的较好，因此基本都能弹出其指定的键盘。不过非常遗憾，没有money类型，因此无法弹出ios的money键盘。对于Android就比较杯具，由于各个厂商对于html5的规范支持不统一，造成对于以上的类型，弹出的键盘根绝各种机型的不同而不同。

file类型是相当特殊的类型标签，对于ios而言，它已经实现file，对于android里如果使用的是浏览器，file类型的文件选择，会唤起浏览器实现的文件选择，不过文件的选择不同的手机，具体实现不同，web无法控制。通过设置 capture，可以调用手机默认相机摄像录音功能

date类型，这个也是在手机web开发中非常常用的一个控件，对于这个控件在使用上，需要注意，在ios平台上，由于ios7进行了大规模的平面化设计，因此在ios7和之前的系统，系统弹出的控件界面和交互是不同的，这个需要注意，并且在ios3没有实现date类型。Android对于date日期控件的实现非常碎片化，一般而言4.X,大厂商的手机游览器实现的较好。

range、color、month、datetime、time、week由于受平台和手机的限制太多，不推荐使用。

JS定制控件的问题

由于上述的问题，经常会收到这种需求，就是非常渴望去完整实现某个控件，在PC端，由于发展了很多年，机制较为完整，可以用js来模拟实现，不过在手机端，由于手机、平台等各方因素，使用js来模拟某个控件并不是一个明智之举。各种经验表明，使用js来模拟的控件，在某些机型和平台上会出现非常诡异而又无法解决的问题。因此对于JS定制控件，除非你有非常大的把握，否则不要轻易触碰