最近做了两个关于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. ASCII和万国码

    ASCII和万国码 什么是ASCII 计算机的起初是使用内存中的0101来表示数和机器码.如何用内存中的bit来表示文本一直困扰着人们,毕竟人类主要的信息展示是文字,而不是苦涩的0101.后来ASCI ...

  2. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  3. Eclipse安装Svn无法连接问题

    在Eclipse市场上安装完SVN插件后连接SVN时出现以下错误: SVN: '0x00400006: Validate Repository Location' operation finished ...

  4. 解决Linux命令行为什么变成-bash-3.2$

    在Linux服务器上创建了一个新用户probe,是这样创建的: [root@localhost home]# groupadd -g 501 probe [root@localhost home]# ...

  5. cacti客户端snmp设置

    1. ubuntu : apt-get install snmp snmpd vim /etc/default/snmpd  //将此配置文件中127.0.0.1 删掉. /etc/init.d/sn ...

  6. @Repository , @Service , @Controller 和 @Component

    用Spring MVC时@Controller注解的类将变成一个Spring MVC的控制器. 不用Spring MVC的情况下, 这四个注解没有区别. 根据注解的语义, 注解在类上面可以提高代码的可 ...

  7. 概率论与数理统计 Q&A：

    --------------------------------- 大数定律:大量样本数据的均值(样本值之和除以样本个数),近似于随机变量的期望(标准概率*样本次数).(样本(部分)趋近于总体)中心极 ...

  8. Python模拟登录的几种方法

    目录 方法一:直接使用已知的cookie访问 方法二:模拟登录后再携带得到的cookie访问 方法三:模拟登录后用session保持登录状态 方法四:使用无头浏览器访问 正文 方法一:直接使用已知的c ...

  9. uboot的配置及编译

    1. 先执行配置命令 make board_name_config 再执行编译命令 make all 2. 通过在Makefile中找到 board_name_config 目标,可以查看为了得到目标 ...

  10. java.lang.NullPointerException - 如何处理空指针异常

    当应用程序试图null在需要对象的情况下使用时抛出.这些包括: 调用null对象的实例方法. 访问或修改null对象的字段. 把长度null当作一个数组. 像访问或修改null阵列一样访问或修改插槽. ...