H5手机移动端WEB开发资源整合常用的标

meta基础知识

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/

忽略将页面中的数字识别为电话号码

metaname="format-detection"content="telephone=no"/

忽略Android平台中对邮箱地址的识别

metaname="format-detection"content="email=no"/

当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

metaname="apple-mobile-web-app-capable"content="yes"/!--ios7.0版本以后,safari上已看不到效果--

将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

metaname="apple-mobile-web-app-status-bar-style"content="black"/!--可选default、black、black-translucent--

viewport模板viewport模板——通用

!DOCTYPEhtmlhtmlheadmetacharset="utf-8"metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"metacontent="yes"name="apple-mobile-web-app-capable"metacontent="black"name="apple-mobile-web-app-status-bar-style"metacontent="telephone=no"name="format-detection"metacontent="email=no"name="format-detection"title标题/titlelinkrel="stylesheet"href="index.css"/headbody这里开始内容/body/html

viewport模板–target-densitydpi=device-dpi,android2.3.5以下版本不支持

!DOCTYPEhtmlhtmlheadmetacharset="utf-8"metaname="viewport"content="width=,user-scalable=no,target-densitydpi=device-dpi"!--width取值与页面定义的宽度一致--metacontent="yes"name="apple-mobile-web-app-capable"metacontent="black"name="apple-mobile-web-app-status-bar-style"metacontent="telephone=no"name="format-detection"metacontent="email=no"name="format-detection"title标题/titlelinkrel="stylesheet"href="index.css"/headbody这里开始内容/body/html常见问题

移动端如何定义字体font-family中文字体使用系统默认即可,英文用Helvetica

/*移动端定义字体的代码*/body{font-family:Helvetica;}

参考《移动端使用字体的思考》

移动端字体单位font-size选择px还是rem对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考:

html{font-size:10px}

mediascreenand(min-width:px)and(max-width:px){html{font-size:11px}}

mediascreenand(min-width:px)and(max-width:px){html{font-size:12px}}

mediascreenand(min-width:px)and(max-width:px){html{font-size:15px}}

mediascreenand(min-width:px)and(max-width:px){html{font-size:20px}}

mediascreenand(min-width:px)and(max-width:px){html{font-size:22.5px}}

mediascreenand(min-width:px)and(max-width:px){html{font-size:23.5px}}

mediascreenand(min-width:px){html{font-size:25px}}

移动端touch事件(区分webkit和winphone)当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动

touchend——当手指离开屏幕时触发

touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用

TouchEvent

touches:屏幕上所有手指的信息

targetTouches:手指在目标区域的手指信息

changedTouches:最近一次触发该事件的手指信息

touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息

参数信息(changedTouches[0])

clientX、clientY在显示区的坐标

target:当前元素

参考:







































治白癜风最有效的方法
北京什么医院治疗白癜风好



转载请注明:http://www.guyukameng.com/php/8570.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了