最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。

方法一：引入淘宝开源的可伸缩布局方案

引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击）

淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。这块也可以直接用js实现，后面会提到

具体引入和使用方法，移步github查看，非常详细。

方法二：viewport 的使用

github里边，有提到  viewport 的使用。我感觉这篇文章关于viewport 的介绍特别详细，包括比例、是否缩放等的属性介绍特别的详细，虽然文章的内容一大片的字看起来很多，但是请耐心看完，都是干货能很好的让你认识viewport。如果比较着急，请继续往下看总结图吧

http://www.cnblogs.com/2050/p/3877280.html(此处可点击)

关于 viewport 的，这块直接引用上面文章的内容，我感觉也是最干脆最直接的总结了吧

方法三：使用js+viewport动态设置手动适配rem

我的编辑器是vscode,添加了插件cssrem自动转换

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->

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

    <!-- 启用360浏览器的极速模式(webkit) -->

    <meta name="renderer" content="webkit">

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 针对手持设备优化，主要是针对一些老的不识别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">

    <meta content="telephone=no" name="format-detection" />

    <meta name="huaban" content="nopin" />

    <link rel="icon" type="image/x-icon" href="/favicon.ico">

    <title>新茶饮</title>

    <script src="/config.js"></script>

   <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

  </head>

  <body>

    <div id="app"></div>

    <!--

    在iphone 5 中1rem=16px;

    html font-size =16px=1rem;

  -->

  <script>

    //得到手机屏幕的宽度

    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

    console.log('htmlWidth',htmlWidth)

    //得到html的Dom元素

    let htmlDom = document.getElementsByTagName('html')[0];

    // if(htmlWidth>640){//超过640大小的，字体根部都是16px

    //   htmlWidth=640;

    //   console.log('htmlWidth-true',htmlWidth)

    // }

    //设置根元素字体大小

    htmlDom.style.fontSize = htmlWidth / 40 + 'px';

  </script>

  </body>

</html>

方法四：根据css的媒体查询动态设置根部html字体大小

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {

    html { font-size: 703%; }

}

@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {

    html { font-size: 732.4%; }

}

@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {

    html { font-size: 750%; }

}

@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {

    html { font-size: 781.25%; }

}

@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){

    html { font-size: 808.6%; }

}

@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){

    html { font-size: 843.75%; }

}

以上就是总结的方法，但是实话说。目前全网找或者是尝试来看，确实没有一个十全十美的适配的解决方案，只能不断在实践应用当中慢慢填坑

vue移动端h5页面根据屏幕适配的四种方案的更多相关文章

  1. 移动端H5页面中1px边框的几种解决方法

    问题提出 这是一个比较老的问题了,我第一次注意到的时候,是UI设计师来找我麻烦,emmm那时候我才初入前端职场,啥也不懂啊啊啊啊啊,情形是这样的:设计师拿着手机过来:这些边框都粗了啊,我的设计稿上是1 ...

  2. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  3. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  4. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  5. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  6. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  7. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  8. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  9. （转）使用Flexible实现手淘H5页面的终端适配

    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...

随机推荐

  1. 40. Linux下7-zip解压到当前目录的命令

    7z x test.zip 解压到当前目录下,但保留原来的目录结构 7z e test.zip 解压到当前目录下,不保留原来的目录结构

  2. @Slf4j注解

    参考:https://blog.csdn.net/qq_26344609/article/details/78905845 如果不想每次都写private final Logger logger = ...

  3. mvc框架路由原理

    到目前为止已经使用过很多php框架,比如:Zendframework,ThinkPHP,YII,Slim.但还未静下心来研究过框架的原理. 今天首先来看一下mvc框架中路由的原理: 所谓路由,就是程序 ...

  4. 19.OGNL与ValueStack(VS)-OGNL入门

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 下面我们在com.asm.vo.User类中增加一个字段private Ad ...

  5. attr 修改IMG src

    jQuery修改img的src的方法:$("#img_id").attr("src","new_src"); 定义和用法 attr() 方法 ...

  6. check_http检查http服务

    选 项 说 明 -H, --hostname=ADDRESS 主机名或域名 -I, --IP-address=ADDRESS server的IP地址,用于在不能DNS的情况下 -p, --port=I ...

  7. JavaScript eval_r() 函数

    定义和用法 eval_r() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval_r(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的  ...

  8. plot绘图

    plot绘图 坐标系图(折线图) 折线图用于显示随时间或有序类别的变化趋势 plt.plot(x,y,format_string,**kwargs) y:Y轴数据,列表或数组,必选 x:X轴数据,列表 ...

  9. 删除临时表空间ora-25152错误

    删除临时表空间,或者收缩临时表空间经常会出现表空间占用等情况. 下面我们就对这种情况进行处理, 首先查找被锁的sid: SELECT a.INST_ID,b.TABLESPACE , b.segfil ...

  10. mysql 用户及赋予权限

    查询用户: use mysql; select host,user from mysql.user; 创建用户: create user 'mhc'@'%' identified by 'mhc.12 ...