手机端兼容

手机端兼容性

<随笔> 手机端兼容

一、私有 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">

二、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;

三、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;
}