vue移动端html5页面根据屏幕适配的四种解决方法

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

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

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

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

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

方法二：viewport 的使用

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

https://www.jb51.net/article/149140.htm

关于 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" rel="external nofollow" >
 <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移动端html5页面根据屏幕适配的四种解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解vue2.0 不同屏幕适配及px与rem转换问题

    详解vue2.0 不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 1.安装插件(我是安装了淘宝镜像,所以是cnpm,若

  • 详解vue移动端项目的适配(以mint-ui为例)

    1.使用vue-cli脚手架生成项目骨架,略. 2.相关配置: rem适配: index.html加入以下代码,并在head中加入以下meta; <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWi

  • vue 移动端适配方案详解

    vue 移动端适配方案详解

    一.方法一:rem 布局 在主入口:index.html,<head> 标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem.) <script> (function () { // 在标准 375px 适配下,100px = 1rem; var baseFontSize = 100; var baseWidth = 375; var set = function () { var clientWidth = document.documentEl

  • vue项目中公用footer组件底部位置的适配问题

    需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部:窗口高度的变化时,footer的位置需要重新调整. 可能有的伙伴首先想到的 position: fixed; bottom: 0; 这确实能解决页面内容不足以撑满浏览器高度的情况,但由于footer组件是公用的,在内容很多的页面调用时,会出现内容被组件覆盖的情况. 我最终的解决方案: 给内容不足以撑满浏

  • vue使用rem实现 移动端屏幕适配

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. postcss-pxtorem:转换px为rem的插件 安装 postcss-pxtorem npm install postcss-pxtorem --save 新建rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前

  • vue中的适配px2rem示例代码

    vue中的适配px2rem示例代码

    前言 做移动端时,适配 是必须的.使用rem单位,可在不同屏幕上完美显示相同的布局.px2rem 插件方便的将px单位转为了rem. px2rem 地址:https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候,最简单的方法之一 下面是基本步骤(使用cnpm) 1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 :import 'lib-flexible/flexible

  • vue做移动端适配最佳解决方案(亲测有效)

    vw 解决方案 1. 安装并配置PostCss插件 复制代码 代码如下: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js,对PostCSS插件进行配置 module.exports = { "plugins":

  • vue项目中使用lib-flexible解决移动端适配的问题解决

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了. lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size

  • vue移动端html5页面根据屏幕适配的四种解决方法

    vue移动端html5页面根据屏幕适配的四种解决方法

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用. 方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-wid

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • vuex页面刷新数据丢失问题的四种解决方式

    目录 为什么说刷新页面vuex的数据会丢失 第一种方法用sessionStorage 第二种方法是 vuex-along 示例如下 第三种方法是 vuex-persistedstate 示例如下 第四种方法是 vuex-persist 示例如下 结语: 为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了. 第一种方法用sess

  • vue css 引入asstes中的图片无法显示的四种解决方法

    这里主要针对的是vuecli2中的一些问题. vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题.但是,一大包发布打线上,就会出现图片无法加载的情况! 这是因为,出于某些原因,有人修改了config目录下的i

  • vue router带参数页面刷新或回退参数消失的解决方法

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • vue移动端判断手指在屏幕滑动方向

    vue移动端判断手指在屏幕滑动方向

    vue移动端判断手指在屏幕滑动方向,供大家参考,具体内容如下 可以据此实现手指滑屏切换tab的功能,例如京东的订单页,这几个tab切换就可以利用这个实现 页面 <div @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" > //屏幕滑动 //手指按下屏幕 handleTouchstart(event){ this.startTime =

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • vue 移动端记录页面浏览位置的方法

    记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流 描述: 假设有a b c 页面 从a页面 到 b页面 ,b页面到c页面 b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次浏览的位置 b在返回a的时候,在从a进入b 返回的是b的顶部(也就是不记录浏览位置) 做法: 使用到了vuex ,beforeRouteLeave 1.首先在vuex中state定义一个变量来记录当前的浏览的位置 //state中定义数据 state: { carrerTouScroll: { he

  • Vue实现大屏页面的屏幕自适应

    本文实例为大家分享了Vue实现大屏页面的屏幕自适应的具体代码,供大家参考,具体内容如下 1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 }//大屏设计宽高 } 2. 定义resetScreenSize.js import appConfig from '../config/base' export function pageResize(cal

  • vue 动态给每个页面添加title、关键词和描述的方法

    前言:直接写html加title和关键词想必大家都知道怎么去加,但用vue框架开发的项目我们怎么去动态的给每个页面添加呢 ↓ 先在router.js里面配置我们的title.关键词和描述 { path: '/train', name: 'Train', component: () => import('../components/page/Train.vue'), meta: { title: '教师培训-恩启官网', content: { keywords: '教师培训.恩启培训.恩启云课堂.

随机推荐