meta标签
meta标签,这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
第一个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,可以调用手机默认相机摄像录音功能
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
- date类型,这个也是在手机web开发中非常常用的一个控件,对于这个控件在使用上,需要注意,在ios平台上,由于ios7进行了大规模的平面化设计,因此在ios7和之前的系统,系统弹出的控件界面和交互是不同的,这个需要注意,并且在ios3没有实现date类型。Android对于date日期控件的实现非常碎片化,一般而言4.X,大厂商的手机游览器实现的较好。
- range、color、month、datetime、time、week由于受平台和手机的限制太多,不推荐使用。
JS定制控件的问题
由于上述的问题,经常会收到这种需求,就是非常渴望去完整实现某个控件,在PC端,由于发展了很多年,机制较为完整,可以用js来模拟实现,不过在手机端,由于手机、平台等各方因素,使用js来模拟某个控件并不是一个明智之举。各种经验表明,使用js来模拟的控件,在某些机型和平台上会出现非常诡异而又无法解决的问题。因此对于JS定制控件,除非你有非常大的把握,否则不要轻易触碰