移动开发总结

作者: 子不语静守花开 | 来源:发表于2019-03-25 11:12 被阅读0次

移动开发总结
移动端开发总结
移动端页面开发资源总结
移动端总结
Smack开发总结（四）消息管理
Smack 开发总结（一）管理连接
Vue移动端开发总结
移动端开发要点总结
移动端开发新总结
移动端开发css总结

HTML:

设置页面宽度等于设备宽度，并禁止用户缩放页面

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

忽略页面中的数字识别为电话，忽略email识别


<meta name="format-detection" content="telphone=no, email=no" />

开启对web app程序的支持（仅针对IOS系统）:
网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示

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

改变顶部状态条的颜色（仅针对IOS系统）:
在 web app 下状态条（屏幕顶部条）的颜色默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

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

完整的HTML模板：

<!DOCTYPE html>
 <html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<meta name="format-detection" content="telphone=no, email=no" /> 
<title>标题</title> 
</head>
<body> 这里开始内容 </body>
</html>

******************************************华丽分割线******************************************
CSS:

css reset

html{
    -webkit-tap-highlight-color: rgba(0,0,0,0); /*去掉触摸遮盖层*/
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-user-select: none; /*禁止用户选择文字*/
}

/*设置所有盒子大小计算边框内*/
*,
*:before,
*:after {
    box-sizing: border-box;
}

/*消除输入框的阴影和边框*/
input,textarea, select{
    -webkit-appearance: none; /*去掉webkit默认的表单样式*/
    appearance: none;
    outline: none;
    border: none;
}

消除transition动画闪屏

.animate { 
  -webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ 
  -webkit-backface-visibility: hidden; /*设置进行转换的元素的背面在面对用户时是否可见：隐藏*/ 
}

开启硬件加速: 解决页面闪白，保证动画流畅。

.css { 
  -webkit-transform: translate3d(0, 0, 0); 
  -moz-transform: translate3d(0, 0, 0); 
  -ms-transform: translate3d(0, 0, 0); 
  transform: translate3d(0, 0, 0);
 }

******************************************华丽分割线******************************************

其他:

关于打电话、发短信、发邮件的实现

<a href="tel:10086">打电话给：10086</a> <a href="sms:10086">发短信给：10086</a> <a href="mailto:zhangxy_92@outlook.com">发邮件给：zhangxy_92@outlook.com</a>

******************************************华丽分割线******************************************

关于布局:

移动端中对于flexbox的支持已经很好，flexbox是布局神器。阮一峰老师写过flexbox 入门教程；

感谢作者：https://blog.csdn.net/qq_43258252/article/details/86538489