最近做了两个关于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. LSTM（Long Short-Term Memory）长短期记忆网络

    1. 摘要 对于RNN解决了之前信息保存的问题,例如,对于阅读一篇文章,RNN网络可以借助前面提到的信息对当前的词进行判断和理解,这是传统的网络是不能做到的.但是,对于RNN网络存在长期依赖问题,比如 ...

  2. 客户端如何连接 DataSnap Server 调用服务的方法

    一般http访问的地址是 http://localhost:8099/datasnap/rest/TServerMethods1/EchoString/abc 一.用FDConnection1连接Da ...

  3. style css

    Title 语文 用户名 用户名 数学 英语 <!DOCTYPE html><html lang="en"><head> <meta ch ...

  4. storm集群相关资料

    1. Storm集群组件 Storm集群中包含两类节点:主控节点(Master Node)和工作节点(Work Node).其分别对应的角色如下: 主控节点(Master Node)上运行一个被称为N ...

  5. jsp页面转发获取不到参数

    使用的是<input type="hidden" name="nameid" value="${nameid}"/>,隐藏默认值 ...

  6. 练习：自己写一个容器ArrayList集合 一一数组综合练习

    package cn.bjsxt.myCollection; import java.util.Arrays; /** * 天下文章一大抄,看你会抄不会抄. * 模拟Stringbuilder 写一个 ...

  7. too few PGs per OSD (20 < min 30)

    ceph osd pool set replicapool pg_num 150 ceph osd pool set replicapool pgp_num 150

  8. 201671010140. 2016-2017-2 《Java程序设计》java学习第四周

    java学习第四周体会         本周,与前几周不同的是,老师没有进行课堂测试,而是上了一节课,回顾与总结了之前三周所学的知识,也是因为这节课,我注意到了之前学习中忽略的一些细节,和之前学习方法 ...

  9. 大型运输行业实战_day02_1_数据库设计与powerDesigner使用

    1.安装powerDesigner 1. 傻瓜式的安装 2.在安装的过程中选择地区后才可以点击同意和下一步 3.安装地址,建议直接把c改为d 4.其他选项直接下一步 2.使用powerDesigner ...

  10. tf.unstack\tf.unstack

    tf.unstack 原型: unstack( value, num=None, axis=0, name='unstack' ) 官方解释:https://tensorflow.google.cn/ ...