手机端兼容性
手机端兼容
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">
<!-- ==========================================>[强制让文档的宽度与设备的宽度保持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;
}
/* 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;
}