移动端开发技巧

移动端动态生成rem的问题

提到移动端，大家第一个想到的就是移动端针对不同尺寸的手机尺寸的时候如何进行响应式布局的问题、在最近看过多篇博客之后总结出一个相对来说较优的解决方案：根据不同的实际图尺寸动态生成html的font-size，然后其他的尺寸通过rem来写。

<script>
	function resizeRoot() {
		var wFsize = document.documentElement.clientWidth / (750 / 100);
		document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
	}

	resizeRoot();
</script>
复制代码

由于我拿到的设计图是iphone6，也就是750的尺寸，所以我上面公式带入的是750，具体的数值还需要根据不同的设计图尺寸进行修改。

同时如果在设计图中某一个元素的尺寸为200px，那么在代码中直接写2rem即可。

1、meta类型

移动端meta小结

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<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="telephone=no, email=no" />

<!-- iOS 移动设备添加主屏幕标题设置 -->
<meta name="apple-mobile-web-app-title" content="TM" >

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--优先使用最新版本的IE和Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 


<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>

<!-- Windows 8 磁贴图标 --> 
<meta name="msapplication-TileImage" content="icon.png"/>
<!--百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
复制代码

将布局视口设置等于设备像素

<script>
    var scale = 1 / window.devicePixelRatio;
    document
    .querySelector('meta[name="viewport"]') //获取 name为 viewport的 meta元素
    // 设置 content属性
    .setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
</script>
复制代码

2、布局类

固定底栏布局

HTML代码：

<div class="div_class_Popup">
	<div class="all_class_Header"></div>
	<div class="all_class_Content"></div>
	<div class="all_class_Footer"></div>
</div>
复制代码

CSS代码:

.div_class_Popup{
  display: flex;
  min-height: 100vh;//设定最低高度
  flex-direction: column;//决定主轴的方向为竖
}

.all_class_Content {
  flex: 1;//中间内容撑开 保证底部栏永远在底部
}
复制代码

3、控件类

移动端取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色

通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
复制代码

输入框：去掉iOS上默认阴影

input,textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}
复制代码

上下拉动滚动条时卡顿、慢

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
复制代码

禁止复制、文本选中

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
复制代码

ios和Android下触摸元素出现半透明灰色遮罩

Element {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}
复制代码

某些安卓手机圆角失效

background-clip: padding-box;
复制代码

设置缓存

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求，如果不希望缓存可以设置no-cache

<meta http-equiv="Cache-Control" content="no-cache" />
复制代码

开启电话功能

<a href="tel:123456">123456</a>
复制代码

开启短信功能

<a href="sms:123456">123456</a> 
复制代码

图片：100%响应式显示

清除浮动

.clearfix{
  display: inline-block
  &:after{
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
  }
}
复制代码

4、其他怪异样式类

移动端Retina屏幕1px问题

戳这里

@mixin border-1px($color){
  position: relative;
  &:after;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid $color;
  content: ' ';
}
复制代码

不同的dpr应用不同的图片

@mixin bg-image($url){
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png");
  }
}


/**在不同的dpr下设置border 1px*/
@media (-webkit-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}
@media (-webkit-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
@media (-webkit-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
    }
  }
}
复制代码

5、文本类

多行文本省略显示

display: -webkit-box;// 设置display，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;//规定框的子元素应该被水平或垂直排列
-webkit-line-clamp: 3;// 限制在一个块元素显示的文本的行数 
overflow: hidden;//超出部分隐藏
text-overflow: ellipsis;//然后省略号补齐空位
text-overflow: -o-ellipsis-lastline;//在文本的最后一行加上省略号
复制代码

函数封装

//文本超出XX行省略号
@mixin setOverflowEllipsis($rowsize){
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$rowsize};
    text-overflow: -o-ellip1sis-lastline;
    -webkit-box-orient: vertical;
}
复制代码

6、代码

CSS reset

/* hcysun  */
@charset "utf-8";
/* reset */
html{
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
    -webkit-touch-callout: none
    font-family: Helvetica;
}
body{font-size:12px;}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none; overflow:auto;}
/* end reset */
复制代码

戳这里

戳这里