移动Web 开发中的一些前端知识收集汇总

1

2

3

4

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

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

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

<meta name="apple-mobile-web-app-title" content="测试APP">

1

2

<meta content="telephone=no" name="format-detection" />  <!--告诉设备忽略将页面中的数字识别为电话号码-->

<meta content="email=no" name="format-detection" /> <!--不让android识别邮箱-->

1

2

<link rel="apple-touch-icon"  sizes="72x72"  href="apple-touch-icon.png">

<link rel="apple-touch-icon-precomposed"  sizes="72x72"  href="apple-touch-icon-precomposed.png">

1

2

3

<link rel="apple-touch-startup-image" sizes="320x460" href="imgs/setupImg320.png" />

<link rel="apple-touch-startup-image" sizes="640x920" href="imgs/setupImg640.png" />

<link rel="apple-touch-startup-image" sizes="640x1096" href="Images/setupImg5.png" />

1

<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”>

1

2

3

<input type="file" accept = "image/*; capture=camera" />

<input type="file" accept = "video/*; capture=camcorder" />

<input type="file" accept = "audio/*; capture=microphone" />

1

2

3

<a href="sms:18888886666,18888885555″]]> 发送短信给多个人 的链接

<a href="sms:18888886666?body=sms txt"]]> 发送短信附带内容 的链接

<a href="tel:18888886666"]]>Call us at 18888886666</a]]> 拨打电话的链接

1

input{-webkit-appearance:none;outline:none;}

1

2

3

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

text-size-adjust: 100%;

1

2

-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

-webkit-backface-visibility: hidden;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

1

2

3

4

-webkit-tap-highlight-color: transparent; /*Mobile上点击链接高亮的时候设置颜色为透明*/

-webkit-user-select: none; /*设置为无法选择文本*/

-webkit-touch-callout: none; /*长按时不触发系统的菜单（禁止ios弹出各种操作窗口）, 可用在图片上加这个属性禁止下载图片*/

-webkit-overflow-scrolling: touch;/*快速滚动和回弹，模拟原生app效果*/

1

2

3

4

5

6

7

8

window.scrollTo(0,0); /*隐藏地址栏*/

window.matchMedia(); /*匹配媒体*/

navigator.connection; /*决定手机是否运行在WiFi/3G等网络*/

window.devicePixelRatio; /*决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)*/

window.navigator.onLine; /*取得网络连接状态*/

window.navigator.standalone; /*决定iPhone是否处于全屏状态

touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

gesture事件 (Apple only, iOS 2+):  gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)