这是一些移动端开发的备忘记录。 <meta> 元素 <meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/> width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素) height:高度(数值 / device-height)(范围从223 到10,000) initial-scale:初始的缩放比例 (范围从>0 到10) minimum-scale:允许用户缩放到的最小比例 maximum-scale:允许用户缩放到的最大比例 user-scalable:用户是否可以手动缩 (no,yes) WebApp全屏模式:伪装app,离线应用。 <meta name=“apple-mobile-web-app-capable” content=“yes” /> <!– 启用 WebApp 全屏模式 –> 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。 <meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent” /> 忽略数字自动识别为电话号码 <meta content=“telephone=no” name=“format-detection” /> 忽略识别邮箱 <meta content=“email=no” name=“format-detection” /> 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner(如下图)。参考文档 <meta name=“apple-itunes-app” content=“app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 其它 <!– 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 –> <meta name=“HandheldFriendly” content=“true”> <!– 微软的老式浏览器 –> <meta name=“MobileOptimized” content=“320”> <!– uc强制竖屏 –> <meta name=“screen-orientation” content=“portrait”> <!– QQ强制竖屏 –> <meta name=“x5-orientation” content=“portrait”> <!– UC强制全屏 –> <meta name=“full-screen” content=“yes”> <!– QQ强制全屏 –> <meta name=“x5-fullscreen” content=“true”> <!– UC应用模式 –> <meta name=“browsermode” content=“application”> <!– QQ应用模式 –> <meta name=“x5-page-mode” content=“app”> <!– windows phone 点击无高光 –> <meta name=“msapplication-tap-highlight” content=“no”> rem单位,可以根据html来设定基准值 //1rem = 10px html { font-size: 62.5%; } //或者通过js来算 0.0625*(640<=document.documentElement.clientWidth?640:document.documentElement.clientWidth)+“px” js事件属性 e.changedTouches[0]; Android端有些设备不触发touchend事件解决办法: document.ontouchmove = function(ev){ ev.preventDefault(); } 媒体查询Media Query //浏览器宽度小于等于320的时候 @media screen and (max-width:320px) { body{} } Flex布局,由于新旧属性的关系,导致有些低版本不支持,需要全部写出来,基本可以兼容所有 .page-wrap { display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD – Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER – IE 10 */ display: -webkit-flex; /* NEW – Chrome */ display: flex; /* NEW, Spec – Opera 12.1, Firefox 20+ */ } .main-sidebar { -webkit-box-flex: 1; /* OLD – iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD – Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec – Opera 12.1, Firefox 20+ */ } 改变placeholder的颜色 ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color:#999; } IOS中Safari设置保存到桌面图标: <link rel=“apple-touch-icon” href=“custom_icon.png”> 被点击元素的外观变化,比如a标签,被点击的时候,会出现一圈颜色,看下面的演示(用手机端查看),第一个没有加样式,点击会出现黑色背景,第二个加了样式则没有: -webkit-tap-highlight-color:rgba(0,0,0,0) 点击我再点击我 input,button默认样式清除,在是移动端,这些都默认都带有样式,有的圆角,阴影,加上下面的代码即可 -webkit-appearance: none; active的bug,有时候我们需要在点击某个元素的时候,改变自身透明度,或者颜色,这些交互很常见,可以用:active来完成,但是有些手机上不起作用,需要加上一段js: document.body.addEventListener(‘touchstart‘,function(){},false); 给overflow:auto的滚动条,添加快速滑动效果 -webkit-overflow-scrolling : touch; iOS中如何禁止用户保存图片\复制图片 -webkit-touch-callout:none 穿透绝对定位元素去触发下面元素的某些行为 pointer-events:none;