## 一、META标签
页面缩放
~~~
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
~~~
禁止iphone识别电话及邮箱
~~~
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
~~~
iphone状态栏样式
~~~
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
~~~
## 二、打电话发短信
~~~
<a href="tel:020-11811922">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:123456@qq.com">123456@qq.com</a>
~~~
## 三、css3过渡动画开启硬件加速
~~~
.xxx{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
~~~
## 四、点击事件
由于click事件有300ms的延迟，以至事件不灵活，造成体验不友好，可以使用touch事件来代替（touchstart/touchend）
## 五、图片优化
* 图标过多的话，尽量使用字体图标
* 图标少的话，如果使用了图片，那么尽量合到一个图片里，通过background引入、再配合background-size来改大小
* 小图片的话可以使用base64编码图片来代替url图片，以减少请求
* 图片懒加载，只加载可视区的图片，其他的跟据滚动来加载，但这个会导致dom的重排，具体看项目需求了
## 六、禁止用户选择
~~~
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
~~~
注：如果遇到弹层关闭有遗留的话，可以让弹层相对于body来定位
## 七、谨慎使用fixed定位
iphone下fixed定位不识别或定位错误，不知道新版本会如何，具体还要在真机上看。。
## 八、消除transition闪屏
~~~
.xxx {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
~~~
## 九、去除iphone上元素tap默认效果
~~~
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
~~~
## 十、iphone-x齐刘海解决方案
给body加个背景色
~~~
body{background-color: '#9AC130';}
~~~
使用 [viewport-fit](https://drafts.csswg.org/css-round-display/#descdef-viewport-viewport-fit) 设置visual viewport大小
可选
* auto：这个值不影响初始布局视窗，整个Web页面是可视的。在视窗之外的UA绘制的是未定义的，它可能是画布的背景色，或者是UA认为合适的其他东西。
* contain：最初的布局视窗和视觉布局视窗被设置为最大的矩形。在Viewport之外的UA绘制的是未定义的，它可能是画布的背景色，或者UA认为合适的其他东西。
* cover：初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形。
~~~
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
~~~
也可以这样
~~~
@viewport(viewport-fit: contain) {
/* CSS for rect */
}
~~~
或这样
~~~
@viewport {
viewport-fit: cover;
}
@media(shape: round) {
/* CSS for round */
}
@media(shape: rect) {
/* CSS for rect */
}
~~~
使用safe-area-inset-* 针对iphone-x的形状不规则，apple添加的一个方法将安全区域布局暴露给CSS。这个方法叫[CSS constants](https://github.com/w3c/csswg-drafts/issues/1693)
constant()函数可选参数
* constant(safe-area-inset-top)：在viewport顶部的安全区域内设置（CSS像素）
* constant(safe-area-inset-bottom)：...底部的安全区域设置（CSS像素）
* constant(safe-area-inset-left)：...左侧的安全区域设置（CSS像素）
* constant(safe-area-inset-right)：...右侧的安全区域设置（CSS像素）
~~~
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)
~~~
这完全解决了在菜单上和社交媒体图标上的问题
对于不知道如何解决constant()语法的旧设备来说，你可以做一个降级的处理，使用[calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)方法，也可以借用[@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)来实现
~~~
@supports(constant(safe-area-inset-top)) {
header {
/* status bar height on IOS 11+ */
padding-top: constant(safe-area-inset-top)
}
}
~~~
其他文章参考：[关于H5页面在iPhoneX适配](https://www.cnblogs.com/lolDragon/p/7795174.html)
## 十一、布局单位
rem（font size of the root element）是指相对于根元素(html)的字体大小的单位。
~~~
html{ font-size: 62.5%; }
body{ font-size: 1.2rem; }
.xxx{ font-size: 1.4rem; }
~~~
vw和vh（viewport的宽度和高度）
vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
~~~
.xxx{ height: 100vh; }
~~~
[七个你可能不了解的CSS单位](http://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html)
## 十二、字体
~~~
html{ font-family: "Microsoft YaHei","Droidsansfallback","HelveticaNeue","黑体","monospace", "sans-serif", "serif"; }
~~~
## 十三、javascript与android、IOS交互
[DSBridge](http://www.dsbridge.com/index.html)：[最好用的跨平台Js bridge新秀-DSBridge Ios篇](http://www.jianshu.com/p/3946605109ed)
## 十四、添加到主屏后的标题（IOS）
~~~
<meta name="apple-mobile-web-app-title" content="飞常准" />
~~~
## 十五、全屏模式（IOS）
~~~
<meta name="apple-touch-fullscreen" content="yes" />
~~~
## 十六、隐藏状态栏和工具栏（IOS）
~~~
<meta name="apple-mobile-web-app-cappable" content="yes" />
~~~
## 十七、禁止百度转码，添加广告
~~~
<meta http-equiv="Cache-Control" content="nositeapp" />
~~~
## 十八、启动动画（IOS）
由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小。
~~~
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
~~~
## 十九、添加到主屏后的APP图标
~~~
<!-- 设计原图 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">
~~~
## 二十、优先使用IE edge 或 chrome
~~~
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
~~~
## 二一、font-family （Helvetica在IOS、Android、winPhone系统上都支持）
~~~
* /* 移动端定义字体的代码 */
* body{font-family:Helvetica;}
~~~
## 二二、winphone系统a、input标签被点击时去掉半透明灰色背景
~~~
<meta name="msapplication-tap-highlight" content="no">
~~~
## 二三、webkit表单元素的默认外观怎么重置
~~~
input{-webkit-appearance: none;}
~~~
## 二四、关闭iOS键盘首字母自动大写
~~~
<input type="text" autocapitalize="off" />
~~~
## 二五、关闭iOS输入自动修正
~~~
<input type="text" autocorrect="off" />
~~~
## 二六、禁止文本缩放
~~~
html{ -webkit-text-size-adjust: 100%; }
~~~
## 二七、快速回弹滚动
~~~
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
~~~
## 二八、禁止保存或拷贝图片（IOS）
~~~
img { -webkit-touch-callout: none; }
~~~
## 二九、屏幕旋转的事件和样式
事件
~~~
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
break;
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}
~~~
样式
~~~
/*竖屏时使用的样式 */
@media all and (orientation:portrait) { .css{} }
/*横屏时使用的样式*/
@media all and (orientation:landscape) { .css{} }
~~~
## 三十、上传图片或视频
~~~
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
~~~
## 三一、android去掉语音输入按钮
~~~
input::-webkit-input-speech-button { display: none }
~~~
## 三二、日期选择弹出键盘解决方案（IOS）
1、把input换成div
2、允许的话可以加disabled属性
3、禁止获取焦点
~~~
<input type="text" value="" onfocus="this.blur()">
~~~
## 三三、针对safari浏览器的滚动优化
~~~
.zh-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
~~~
## 三四、UC应用模式
~~~
<meta name="browsermode" content="application">
~~~
## 三五、QQ应用模式
~~~
<meta name="x5-page-mode" content="app">
~~~
## 三六、QQ强制全屏
~~~
<meta name="x5-fullscreen" content="true">
~~~
## 三七、QQ强制竖屏
~~~
<meta name="x5-orientation" content="portrait">
~~~
## 三八、UC强制全屏
~~~
<meta name="full-screen" content="yes">
~~~
## 三九、微软的老式浏览器
~~~
<meta name="MobileOptimized" content="320">
~~~
## 四十、针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
~~~
<meta name="HandheldFriendly" content="true">
~~~
## 四一、启用360浏览器的极速模式(webkit)
~~~
<meta name="renderer" content="webkit">
~~~
## 四二、添加到主屏后的标题（iOS 6 新增）
~~~
<meta name="apple-mobile-web-app-capable" content="yes"/>
~~~
## 四三、 搜索引擎抓取
~~~
<meta name="robots" content="index,follow"/>
~~~
## 四四、安全策略
~~~
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; base-uri 'self'; connect-src 'self'; form-action 'self'; img-src 'self' data:; script-src 'self'; style-src 'unsafe-inline'">
~~~
## 四五、shrink-to-fit
这个shrink-to-fit=no属性是苹果专属的，在Safari IOS9开始引入，安卓以及其他系统没有
## 四六、pointer-events
指针事件，当为none的时候，可用来处理弹层点透的问题，具体介绍：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events)
## 四七、touch-action
触摸操作，当为pan-y时，可用来处理iphone手机的事件异常，具体介绍：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action](https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action)
**参考链接：**
http://www.imooc.com/article/1115
http://blog.sina.com.cn/s/blog_99bf42650102xajf.html
- 事件
- mouse缩放与拖动
- drag拖动
- 事件兼容
- animation/transition
- canvas
- 改变图片颜色
- html转图片
- 视频操作
- 图片缩放、水印、放大镜
- 虚线
- 圆环进度条
- 形状事件
- 圆角矩形
- 绘制注意
- arcTo与贝塞尔
- 椭圆及椭圆进度
- 五角星进度
- 常用图形
- 计算显示文本宽度
- 算法
- 几何算法
- 地图应用相关
- 运行符
- web安全
- 新窗口打开
- xss
- 分享交流
- php环境搭建及xhr交互
- node环境搭建及xhr交互
- node之socketio
- svg之入门介绍
- svg动画
- vue之搜索联想
- vue之登录和echarts
- vue之组件交互与slot
- vue之loading
- vue之上传进度
- webpack及cli
- 开发技巧
- 常用
- 移动端
- 错误处理
- 预加载
- 代理判断
- 数组扩展
- 对象扩展
- 字符串扩展
- 语音播报
- 收集
- 文章/日记
- 框架/库/插件
- 工具
- 学习网站
- 专业术语
- 正则
- 常用验证
- 方法基础
- es6扩展
- 深入实践
- 快捷使用
- html
- css
- http协议
- http
- https
- socket
- 地图/图表
- mapbox
- echarts
- arcgis
- MapView及事件
- 添加WMS/WMTS层
- 增删点线面
- 入门使用
- popup弹层
- 大数据处理
- 批量点
- 批量线
- 在线绘制
- GraphicLayer显示/隐藏
- 动态改变位置
- 去除版权信息
- 添加控件
- Symbol
- 自定义path标记
- 图片标记
- 文本标记
- 旋转
- UI
- 自定义
- 3D地图
- 创建实例
- basemap
- 底图切换
- 自定义底图
- 中心和范围
- pupup弹层更新
- 坐标转换
- 方向线
- leaflet
- amap
- 框架/类库/脚手架
- vue
- 常见问题
- 组件框架
- vue-router
- 命名视图
- url参数映射到prop
- sublime支持
- 随手记
- 常用功能
- threejs
- 常用效果
- 其他特效
- requirejs
- 简单使用
- jquery
- 方法扩展
- 使用笔记
- 组件扩展
- react
- 党见问题
- 学习笔记
- 学习笔记-进阶
- react-redux
- react-router
- redux
- 其他模块说明
- 组件框架
- sublime支持
- gulp
- 安装使用
- js压缩
- css压缩
- 组合使用
- copy文件
- 项目使用
- protobuf
- 入门
- layui
- 登录验证
- laydate
- 安装工具
- yarn
- reactNative
- 入门介绍
- vueNative
- 入门介绍
- 版本控制
- git常用
- git扩展
- git问题
- git其他
- git扩展2
- 编辑器
- vscode
- atom
- webstorm
- 插件
- clipboard
- 奇淫巧技
- js
- 个性打印
- css
- 滤镜效果
- 文本省略
- 当前色
- 新特性
- 花样边框效果
- 波纹效果
- 个性placeholder
- 伪元素内容
- 容器居中
- 知识点
- js
- 递归
- 沙箱
- 内存泄漏
- es6语法
- 变量介绍
- FileRead
- ajax
- web存储
- css
- rem布局