无线web 开发经验(2)—— HTML

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定制控件,除非你有非常大的把握,否则不要轻易触碰

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容