移动端兼容适配的分析

更新日期: 2019-06-23阅读: 1.9k标签: 适配

一、思考

在移动端越来越重要的背景下,每位web开发者对移动适配都有自己的想法。是移动优先,还是PC优先,还是两者兼得?在实际开发中这个问题是和项目产品定位有关的,也涉及到UI的设计,不是开发者能决定。但不管产品如何定位,作为开发者总是要提供最好的解决方案,是用一套样式还是多套样式?网上一搜,有静态布局、流式布局,响应式布局,自适应布局,弹性布局等一堆,云里雾里,到底要怎么选呢?看完这篇文章相信心中就有数了。

二、viewport的使用

1、最常见的设置,大多的框架(如bootstrap)和知名的站点大都是这个配置

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

2、这个配置重点在width=device-width,就是让视窗口等于设配宽度,也就是我开发中能用document的宽度是这个,其它几个“初始缩放大小”“最大缩放大小”“最小缩放大小”和“是否允许用户缩放”可以理解为用来“固定”这个设置不被破坏。
3、这个设置很简单,但同时也会带来一些需要解决的问题。
a、现在的手机都是两倍三倍的Retina高清屏,1px实际的效果是不止一个像素的,对不同的设备设置不同 的,initial-scale可以有比较好的效果,比如在2倍Retina的iphone6(6s,7,8)中设置为0.5。一旦 动态设置这个,也就意味这视窗口不同了,需要不同样式适配。这也是分样式的一套基准,如何分配样式后 面会有更详细的讲解。
b、在PC端如果有最小宽度的限制,需要配置配置不同的width值。


三、单位的使用

1、css中单位很多,这里只介绍最常用的几种:
(1) px:这个可以理解为“基准”单位,就是不管在什么设备中其值是不会变的,就想cm,kg这些一样
(2) em:这个是相对父容器的单位,一般用在字体font-size中比较好。如父容器font-size为16px,则

1em=16px

(3) rem:相对于根元素html的单位,如html的font-size为16px,则1rem=16px
(4) vw/vh: 视口宽高为100vw/100vh,这个和百分比类似,只是百分比是相对于父容器,其相对于视口
2、移动适配最常用的应该是rem,很多框架和淘宝的flexible适配都是基于这个单位,而自己做的话,一般 在首页加载时全局js设置html的font-size即可,代码如下:

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      //这里根据设计稿为750,设置1rem=100px,
      docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
    };

  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('domContentLoaded', recalc, false);
})(document, window);

3.如果用了sass/less等预编译语言可以更灵活的配置的,在上面方法内配置(设计稿为750的情况下):

docEl.style.fontSize = 40 * (clientWidth / 750) + 'px';

在编译函数中配置:

@function px2rem($px, $base-font-size: 20px) {
  @return ($px / $base-font-size) * 1rem;
}

这样我们就可以直接使用设计稿的尺寸,如:px2rem(100px),省去了自己计算,如果没用预编译语言(推荐使用),编辑器也有插件支持单位转化。
4.上面是基于屏幕宽度来设置根元素font-size,如果设置不同的initial-scale,我们基于设备像素比设置,效果就会更好,通过window.devicePixelRatio获取。


四、页面布局方式

1.理解html的文档流方式,其实就是流式布局,即横向需要我们设置,纵向自动叠加。这个和移动端的设计体验方式是比较像的。在宽度中就要用自适应的方式,如百分比,有设置相对单位的,就用相对单位,css3的display:flex,也是很好的选择,现代浏览器和移动设备基本都支持了。
2.刚才说到体验,很明显移动端和pc端的体验真的很不同的,所以光有上面的自适应是不是不够,是不是需要对这两个完全不同的体验方式响应不同的布局和样式。


五、媒体查询

1.我们除了可以用js来判断不同的设备,设置相对单位所用的根元素。另一个强大的方式是可以通过css3强大的媒体查询来指定不同的样式。
2.媒体查询的规则

@media all and ([min-width|max-width|orientation|min-device-width|...]) { ... }

括号[]中表示需要添加的条件,可匹配宽高/横竖屏/设备类型等,比如min-width:750px,表示最小宽度为750px,{}是在匹配模式下的样式。也有逻辑判断and/or/not连接不同的规则
3.要是引入整个文件,可以在link标签中使用

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

表示:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。
4.Bootstrap响应式设计这类栅隔布局采用的就是这套方式。


六、1px像素边框问题 

1.除了上面说到在viewport中设置缩放外,直接设置一个空元素缩放也是可以的

p{
    width: 100px;
      height: 1px;
    background: red;
    display: block;
    transform: scaleY(.5);
}

不足:圆角无法实现,实现4条边框比较麻烦,并且只能单独实现,如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多
2.利用CSS对阴影处理的方式实现0.5px的效果

box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

不足:颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用大量使用box-shadow可能会导致性能瓶颈。四条边框实现效果不理想。
3.图片实现,使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。渐变 linear-gradient (50%有颜色,50%透明)

div{
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

不足:大量使用渐变可能导致性能瓶颈,代码量大,多背景图片有兼容性问题


七、图片高清化

1.可以使用srcset属性设置,使用看https://www.zhangxinxu.com
2.背景图高清
a.使用上面介绍的媒体查询,如:

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
  .css{
      background-image: url(img_1x.png);
  }

  /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
  @media only screen and (-webkit-min-device-pixel-ratio:2){
      .css{
    background-image: url(img_2x.png);
      }
  }

  /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
  @media only screen and (-webkit-min-device-pixel-ratio:3){
      .css{
    background-image: url(img_3x.png);
      }
  }

b.image-set 实现高清化

.css {
      background-image: url(1x.png);    /*不支持image-set的情况下显示*/
      background: -webkit-image-set(
        url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
        url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
        url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
      );
  }

c.很多网页端对图片的要求还是比较低的,不像app那样,图片一般用一张2倍高清图就行,最新的设备对以上属性的支持还是可以的,对于要求高的应用使用


八、移动端click屏幕产生300ms的延时响应

1.原因:在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
2.解决方案:
(1)使用fastclick.js,只要全局加入该文件并设置如下:

FastClick.attach(document.body);

(2) zepto的touch模块,tap事件也是为了解决在click的延迟问题


九、更改默认样式

//使用appearance改变webkit浏览器的默认外观
input,select { -webkit-appearance:none; appearance: none; }

//winphone下,使用伪元素改变表单元素默认外观
//1.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰
select::-ms-expand { display:none; }

//2.禁用radio和checkbox默认样式,::-ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表单输入框默认清除按钮,::-ms-clear修改清除按钮,设置隐藏并使用背景图片来修饰
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
// 禁止长按链接与图片弹出菜单
a,img { -webkit-touch-callout: none }    

// 禁止ios和android用户选中文字
html,body {-webkit-user-select:none; user-select: none; }

// 改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

// android上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}


十、总结

1.网站适配的终端可以用js或媒体查询的方式获取,分配对应的样式。
2.布局上采用相对单位,百分比和flex的弹性方式。
3.对移动端的特殊性进行适配,如1px问题,默认样式等。


来自:https://segmentfault.com/a/1190000019559169


链接: https://www.fly63.com/article/detial/3844

如何针对 iPhone X 设计网站?

在全面屏的 iPhone X 上,不需要而外的代码,Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内,并不会被四周的圆角或者“小刘海”遮挡住。

Web 端屏幕适配方案

像素 :像素是屏幕显示最小的单位。设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

移动端前端适配方案总汇

关于移动端适配的技术方案主要有以下四种:(1)通过媒体查询的方式即CSS3的meida queries(2)以天猫首页为代表的 flex 弹性布局(3)以淘宝首页为代表的 rem+viewport缩放(4)rem 方式

IphoneX底部适配

判断是否是IPhoneX手机;增加fix-iphonex-bottom样式,如果想更改IPhoneX底部34像素的背景颜色怎么办呢?增加iphone-footer-bg样式

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别:共同点:它们都是像素单位,它们都是相对单位。不同点:em大小是基于父元素的字体大小,rem大小是基于根元素(html)的字体的大小

React Native之图片/宽高/字体平台适配

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用 StatusBar 做导航栏的时候,在 iOS 平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏

基于Vue/React项目的移动端适配方案

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。

移动端适配

首先是名词介绍:像素:Pixel,就是物理像素:也就是设备像素,逻辑像素:(css像素)单位为 px设备像素比:devicePixelRatio,(在高倍屏会出现1px变大的问题)。css单位em:相对于当前对象内文本的字体尺寸

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!