首页 > 移动平台 > 详细

【移动WEB开发】常用技巧

时间:2014-03-27 17:34:36      阅读:616      评论:0      收藏:0      [点我收藏+]

*Meta标签

bubuko.com,布布扣
//强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
//iphone设备中的safari私有meta标签,允许全屏模式浏览;
<meta content="yes" name="apple-mobile-web-app-capable" />
//iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
//告诉设备忽略将页面中的数字识别为电话号码;
<meta content="telephone=no" name="format-detection" />
View Code

*关闭识别后添加链接

bubuko.com,布布扣
关闭识别后添加链接
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
<span onclick="location.href=‘tel:122‘"></span>
View Code

*使用HTML5标签

bubuko.com,布布扣
使用html5标签增强语义,提升体验
View Code

*放弃float属性

bubuko.com,布布扣
遇到内容排列排列显示的布局放弃float,使用display、webkit-box自适应布局
View Code

*利用CSS3边框背景属性

bubuko.com,布布扣
使用-webkit-border-image代替复杂的(圆角+内发光+高光)
View Code

*块级化a标签

bubuko.com,布布扣
将每条数据都放在一个a标签中提升用户体验,尽可能的保证用户的可点击区域较大。
View Code

*去除Android邮箱地址的识别

bubuko.com,布布扣
<meta content="email=no" name="format-detection" />
View Code

*去除iOS和Android中的输入URL的控件条

bubuko.com,布布扣
setTimeout(scrollTo,0,0,0) 需要放在window.onload里,当前文档的内容高度必须是高于窗口的高度。
View Code

*用户旋转设备

bubuko.com,布布扣
禁止开发者阻止浏览器的orientationchange事件
View Code

*用户是通过主屏启动你的webapp

bubuko.com,布布扣
IOS 从主屏启动时navigator.standalone为true,从站点为false
Android 无
View Code

*关闭iOS中键盘自动大写

bubuko.com,布布扣
autocapitalize="off"
View Code

*iOS中如何彻底禁止用户在新窗口打开页面

bubuko.com,布布扣
IOS -webkit-touch-callout:none;
Android 无效。
View Code

*iOS中禁止用户保存图片/复制图片

bubuko.com,布布扣
-webkit-touch-callout:none
View Code

*iOS中如何禁止用户选中文字

bubuko.com,布布扣
-webkit-user-select:none
View Code

*iOS中如何获取滚动条的值

bubuko.com,布布扣
window.scrollY和window.scrollX
View Code

*解决盒子边框溢出

bubuko.com,布布扣
宽度100%时边框溢出,-webkit-box-sizing:border-box;
View Code

*Android 2.0以下圆角问题

bubuko.com,布布扣
必须加-webkit- 
View Code

*android页面自适应

bubuko.com,布布扣
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />
View Code

*如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

bubuko.com,布布扣
<meta name="format-detection" content="telphone=no" />
View Code

*样式设置

bubuko.com,布布扣
<link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />    // 肖像模式样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />   // 风景模式样式
<style media="all and (orientation:portrait)"></style> //竖屏时使用的样式
<style media="all and (orientation:landscape)"></style> //横屏时使用的样式
View Code

*事件

bubuko.com,布布扣
/ 手势事件
touchstart            //当手指接触屏幕时触发
touchmove           //当已经接触屏幕的手指开始移动后触发
touchend             //当手指离开屏幕时触发
touchcancel

// 触摸事件
gesturestart          //当两个手指接触屏幕时触发
gesturechange      //当两个手指接触屏幕后开始移动时触发
gestureend

// 屏幕旋转事件
onorientationchange

// 检测触摸屏幕的手指何时改变方向
orientationchange

// touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX    // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY    // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX    // Relative to the screen
screenY     // Relative to the screen
pageX     // Relative to the full page (includes scrolling)
pageY     // Relative to the full page (includes scrolling)
target     // Node the touch event originated from
identifier     // An identifying number, unique to each touch event

//屏幕旋转事件:onorientationchange
window.orientation  //0 肖像模式,-90 左旋,90 右旋,180 风景模式
View Code

*自动大写与自动修正

bubuko.com,布布扣
<input type="text" autocapitalize="off" autocorrect="off" />
View Code

*阻止旋转屏幕时自动调整字体大小

bubuko.com,布布扣
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
View Code

*缩小图片

bubuko.com,布布扣
@media screen and (max-device-width: 480px){
  img{max-width:100%;height:auto;}
}
View Code

【移动WEB开发】常用技巧,布布扣,bubuko.com

【移动WEB开发】常用技巧

原文:http://www.cnblogs.com/jununx/p/3626230.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!