手机端兼容性
<随笔>手机端兼容
1、私有 meta 标签
<!-- ==========================================>[强制让文档的宽度与设备的宽度保持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">
2、HTML5 & CSS3
- 放弃CSS float属性：可以直接使用display:inline-block;
- 利用CSS3边框背景属性： -webkit-border-image 定义按钮样式
- 块级化a标签
- 自适应布局模式：利用百分比的自适应布局
- 学会使用webkit-box：display:webkit-box;
- 去除Android平台中对邮箱地址的识别：
- 去除iOS和Android中的输入URL的控件条：setTimeout(scrollTo,0,0,0);请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
- 如何禁止用户旋转设备：iOS已经禁止开发者阻止orientationchange事件，但是在Android平台，确实也是阻止不了的。
- 检测用户是通过主屏启动webapp：iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，navigator.standalone这个属性获知用户当前是否是从主屏访问webapp的（true）。
- 关闭iOS中键盘自动大写：指定autocapitalize=”off”来关闭键盘默认首字母大写。
- iOS中如何彻底禁止用户在新窗口打开页面：-webkit-touch-callout（对 a 标签）样式属性为none来禁止iOS弹出这些按钮。（普通的只需定义target="_self";属性即可）
- iOS中如何禁止用户保存图片＼复制图片：-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。（对 img 标签）
- iOS中如何禁止用户选中文字：-webkit-user-select设置为none。
- iOS中如何获取滚动条的值：通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
- Android中如何获取滚动条的值：通过document.scrollTop和document.scrollLeft我们可以得到当前窗口的y轴和x轴滚动条的值。
- 如何解决盒子边框溢出：-webkit-box-sizing:border-box;
- 如何解决inline-block中的边距：父元素设置 font-sise:0; 子元素设置 display:inline-block; *display:inline; *zoom:1;vertical-align:top; font-size:12px;
3、CSS3初始化
/* CSS属性初始化 */
html, body {
font-size: 14px;
font-family: "Microsoft Yahei",sans-serif; /*移动端默认的字体*/
width: 100%;
height: 100%;
/* 禁用iPhone中Safari的字号自动调整 */
-webkit-text-size-adjust: none;
}
/* 设置HTML5元素为块 */
::before, ::after, article, aside, details, figcaption, figure, header, footer, hgroup, menu, nav, section {
display: block;
/*清除移动端默认的tap点击的高亮效果*/
-webkit-tap-highlight-color: transparent;
/*设置我们所有的 宽度从border开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 设置图片视频等自适应调整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width: 100%; height: auto;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
input,textarea{
border: 0;
resize: none;
outline: none;
/*只对ios 浏览器 清除默认样式*/
-webkit-appearance: none;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.fl{ float: left; }
.fr{ float: right; }
/* 定义统一的背景样式都加icon_ */
[class^="icon_"]{
background: url("../images/sprites.png") no-repeat;
background-size: 200px 200px;
}
/* 动画 */
@keyframes jump {
0%{
transform: translateY(-300px);
-webkit-transform: translateY(-300px);
}
25%{
transform: translateY(-300px);
-webkit-transform: translateY(-300px);
}
50%{
transform: translateY(-300px);
-webkit-transform: translateY(-300px);
}
75%{
transform: translateY(-300px);
-webkit-transform: translateY(-300px);
}
100%{
transform: translateY(-300px);
-webkit-transform: translateY(-300px);
}
}
.jump {
animation: jump 1s ease;
}
