精华内容
下载资源
问答
  • html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件,解决不同手机尺寸的手机适配问题
  • rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位(注意这里泛指是相对于html中的根元素标签也就是html)。 一般用于在移动端H5页面中解决各种机型适配问题的js,文件中详细说明。
  • 移动端手机和平板适配解决方案,已用于生产环境。
  • 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem...
  • 移动端适配的几种解决办法

    千次阅读 多人点赞 2021-03-11 22:24:09
    方案要适配大多数手机屏幕,并且无 BUG 用户体验要好,页面看着没有不适感 思路 写页面时,按照设计稿写固定宽度,最后再统一缩放处理,在不同手机上都能用 按照设计稿的标准开发页面,在手机上部分内容根据屏幕...

    所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示

    原则

    1. 开发时方便,写代码时设置的值要和标注的 160px 相关
    2. 方案要适配大多数手机屏幕,并且无 BUG
    3. 用户体验要好,页面看着没有不适感

    思路

    1. 写页面时,按照设计稿写固定宽度,最后再统一缩放处理,在不同手机上都能用
    2. 按照设计稿的标准开发页面,在手机上部分内容根据屏幕宽度等比缩放,部分内容按需要变化,需要缩放的元素使用 rem, vw 相对单位,不需要缩放的使用 px
    3. 固定尺寸+弹性布局,不需要缩放

    viewport 适配

    <meta name="viewport" content="width=750,initial-scale=0.5">

     initial-scale = 屏幕的宽度 / 设计稿的宽度。一般设计稿的尺寸是实际开发尺寸的2倍。开发的时候根据设计稿/2即可。

    <head>
      <script>
        const WIDTH = 750
        const mobileAdapter = () => {
          let scale = screen.width / WIDTH
          let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}
    展开全文
  • Android的屏幕适配,即使得某一元素在Android不同尺寸、不同分辨率的手机上具备相同的显示效果,这个问题一直以来都是我们Android开发者不得不面对的问题。本文参考了很多前人的博客,并对这一问题做一个总结,力求...
  • rem解决不同宽度手机适配问题

    千次阅读 2018-12-11 09:40:03
    简单记录如下,不同手机按照宽度不同计算不同的html的font-size,即可实现,代码如下,直接放入即可。 var fun = function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in...

    简单记录如下,不同手机按照宽度不同计算不同的html的font-size,即可实现,代码如下,直接放入即可。

             var fun = function (doc, win) {
                 var docEl = doc.documentElement,
                 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                 recalc = function () {
                           var clientWidth = docEl.clientWidth;
                           if (!clientWidth) return;
                           //这里是假设在750px宽度设计稿的情况下,1rem = 20px;
                           //可以根据实际需要修改
                           docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';
                        };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            };
            fun(document, window);

     

    展开全文
  • android 手机用USB线连接电脑,打开调试选项,并且手机也需要安装谷歌浏览器。在Chrome浏览器中输入chrome://inspect/#...然后我们就可以很方便地定位问题,并且实时更改样式,验证自己的想法是否有效。 ios 在...

    android

    手机用USB线连接电脑,打开调试选项,并且手机也需要安装谷歌浏览器。在Chrome浏览器中输入chrome://inspect/#devices,就能看到手机端显示页面的路径信息了,注意只有H5页面才可以。然后点击inspect,进去之后就可以看到浏览器显示的手机端页面了,第一次进入可能需要翻墙。然后我们就可以很方便地定位问题,并且实时更改样式,验证自己的想法是否有效。

    ios

    在Safari浏览器中打开开发选项,虽然不能像Chrome浏览器那样看到UI界面,但是也能同步更改样式了。

    修改测试环境的bug,如果改完反反复复发到测试环境就太麻烦了,可将手机的接口请求地址代理到本机node服务,这样改完代码就可以实时在手机中看到效果了,跟在浏览器中开发一样爽。如果遇到生产环境的问题,也可以尝试将访问地址放到浏览器中进行定位。

    展开全文
  • 目标一、手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思;——最大程度在各个尺寸屏幕上还原设计稿 目标二、px转换成rem:一般UI...
  • 在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
  • 在项目中,测试发现在一些华为手机的屏幕适配上出现了问题,主要是因为华为Mate等一些系列的手机有一个虚拟按键的设计。当这些虚拟按键由用户手势滑出,或默认显示的话,就会遮挡我们本身的应用布局。比如欢迎界面...
  • 这个问题来来回回困扰了我很久,一直没能妥善解决。 场景1:华为手机遮挡了屏幕底部。 场景2:进入应用时,虚拟键自动缩回,留下空白区域。 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占满整个...
  • 解决手机移动端适配的五种方法

    千次阅读 2021-01-14 15:47:45
    移动端适配的五种方法所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示第一种方法:viewport适配原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.//获取meta节点varmetaNode=...

    移动端适配的五种方法

    所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示

    第一种方法:viewport适配

    原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.//获取meta节点

    var metaNode = document.querySelector('meta[name=viewport]');

    //定义设计稿宽度为375

    var designWidth = 375;

    //计算当前屏幕的宽度与设计稿比例

    var scale = document.documentElement.clientWidth/designWidth;

    //通过设置meta元素中content的initial-scale值达到移动端适配

    meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

    第二种方法:借助media实现rem适配

    rem:CSS的长度单位, 根元素字体大小的倍数,只有根元素字体大小有关; html 中的根元素即 html 元素。

    大部分浏览器的默认字体大小都是16px,所以1rem = 16px;

    rem适配原理:

    长度单位都是用 rem 设置

    当屏幕尺寸改变时,只需要修改 html 元素的 font-size 即可实现等比适配

    我们在制作页面的时候,只考虑跟设计稿相同的屏幕尺寸即可,其他尺寸屏幕自动适配//对屏幕大小划分了html不同的font-size

    @media screen and (min-width: 320px) {html{font-size:50px;}}

    @media screen and (min-width: 360px) {html{font-size:56.25px;}}

    @media screen and (min-width: 375px) {html{font-size:58.59375px;}}

    @media screen and (min-width: 400px) {html{font-size:62.5px;}}

    @media screen and (min-width: 414px) {html{font-size:64.6875px;}}

    @media screen and (min-width: 440px) {html{font-size:68.75px;}}

    @media screen and (min-width: 480px) {html{font-size:75px;}}

    @media screen and (min-width: 520px) {html{font-size:81.25px;}}

    @media screen and (min-width: 560px) {html{font-size:87.5px;}}

    @media screen and (min-width: 600px) {html{font-size:93.75px;}}

    @media screen and (min-width: 640px) {html{font-size:100px;}}

    @media screen and (min-width: 680px) {html{font-size:106.25px;}}

    @media screen and (min-width: 720px) {html{font-size:112.5px;}}

    @media screen and (min-width: 760px) {html{font-size:118.75px;}}

    @media screen and (min-width: 800px) {html{font-size:125px;}}

    @media screen and (min-width: 960px) {html{font-size:150px;}}

    第三种方法:JS配合修改配合rem适配var designWidth = 375;  // 设计稿宽度

    var remPx = 100;               // 在屏幕宽度375px,的时候,设置根元素字体大小 100px

    var scale = window.innerWidth / designWidth; //计算当前屏幕的宽度与设计稿比例

    // 根据屏幕宽度 动态计算根元素的 字体大小

    document.documentElement.style.fontSize = scale*remPx + 'px';

    这里我们计算当前屏幕的宽度与设计稿比后用比例scale乘上100,是因为rem都是基于font-size值设置的,100便于计算,值可以为任意数,比如10,但是Chrome中最小为12,所以这里选择用100;

    比如某个元素,设计稿设计宽度为 640px, 我们需要在css中设置 width: 6.4rem

    比如某个元素,设计稿设计字体大小是 16px, 我们需要在css中设置 font-size:0.16rem

    从而达到rem适配。

    第四种方法:JS动态修改配合CSS预处理器(less)// 计算屏幕宽度

    var screen = document.documentElement.clientWidth;

    // 计算字体大小,取屏幕宽度的16分之一

    var size = screen / 16;

    // 设置根元素字体大小

    document.documentElement.style.fontSize = size + 'px';

    js获取当前屏幕的宽度,将屏幕宽度的16分之一设置给html的font-size// 此时设计稿的宽度为375,定义一个less变量等于16分之一的设计稿宽度

    @rem: 375/16rem;

    如果此时设计稿中的16可以为任意值,你设置多少,js中屏幕宽度就除于多少再赋值给html的font-size。

    若设计稿中的某元素设置宽高为200px.box{

    width:200px;

    height:200px;

    }

    此时可以替换为:.box{

    width:200/@rem;

    height:200/@rem;

    }

    分析:

    设计稿中的元素尺寸都是基于设计稿的宽度而定,如上述,200px的宽度是基于设计稿375px而定的,但当js中获取的宽度发生改变时,需要解决适配问题。假设js中获取的此时屏幕宽度为750px,那么此时html的font-size值为750/16 px;

    此时计算box的width为400px

    注:1rem = 1 html的font-size

    此方法不需要进行单位数值的计算,只需要定义一个less变量,再查找替换将单位px换成 /@rem 即可。

    第五种方法:JS动态修改配合rem适配

    这种方法跟第四种雷同,但不需要再在less中定义变量,只需要进行js获取配合查找替换px即可。// 计算屏幕宽度

    var screen = document.documentElement.clientWidth;

    // 设置根元素字体大小

    document.documentElement.style.fontSize = screen + 'px';.box{

    width:200px;

    height:200px;

    }.box{

    width:200/375rem;

    height:200/375rem;

    }

    分析:

    这种方法是js动态获取屏幕宽度,直接将html的font-size设置为屏幕的宽度,再在less中进行换算。

    若此时js获取的屏幕宽度为750px,html的font-size值设置为750px后,此时计算box的width为400px200/375rem = 200/375*750 px = 400px

    感谢您的支持,我会继续努力的!

    扫码打赏,你说多少就多少

    打开支付宝扫一扫,即可进行扫码打赏哦

    展开全文
  • 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 进行配置 ...
  • 在前端开发中因为有时候需要适配手机而头痛,之前我的解决办法都是media和js一起来适配,但是会写好多好多代码,今天在群里看到有个人发的解决办法很好,我就发出来分享一波 <!DOCTYPE html> <html> <...
  • 一,前言AutoLayout AutoLayoutActivity是专为安卓手机屏幕适配而设计的开源项目,AutoLayoutActivity根据开发者在View布局时设置宽高的值,再根据手机屏幕分辨率的不同,而进行等比例的分配。也就类似于我们经常...
  • 在APP开发过程中,APP软件在正常的手机显示正常,在新出的小米mix,vivX20等后出现的全屏手机上,底部会空出系统灰色区域,不能整个全面展示,原因手机屏幕尺寸发生了变化,解决方法:在Androidmanifest.xml中添加...
  • 一套代码解决ios的所有界面适配问题: 文章:http://blog.csdn.net/changcongcong_ios/article/details/53434495 demo地址:https://github.com/changcongcong/CCInterfaceAdaptation 求demo点赞
  • 前端网页在手机上显示的适配问题

    千次阅读 2017-08-29 18:23:01
    前端开发的h5界面不经适配手机端显示会出现布局变化的问题。需要在编写的时候注意如下几点,以适应适配。 在head标签内添加 用于设置缩放比例,可以保证整体布局不发生错乱。 对于页面内显示的文字,可以使用两种...
  • 解决Vue项目的移动端适配问题

    千次阅读 2020-10-28 20:25:08
    解决Vue项目的移动端适配问题 移动端适配有很多种方案,如flex布局,百分比布局,响应式布局,vw布局;我个人比较喜欢的是rem和vw,当然最喜欢的是rem适配方案,因为它的兼容性更佳! 一、基础知识 在进入正文之前...
  • 前端解决移动端适配的五种方法

    万次阅读 多人点赞 2019-07-11 13:46:10
    移动端适配的五种方法 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 第一种方法:viewport适配 原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var ...
  • 为什么要进行Android屏幕适配   由于Android系统的开放性,任何用户、开发者、OEM厂商、运营商都可以对Android进行定制,于是导致:  Android系统碎片化: 小米定制的MIUI、魅族定制的flyme、...
  • 1.这个操作是利用vue cli webpack 搭建的项目 步骤如下 npm install -g vue-cli vue init webpack your-Project-Name cd your-Project-Name npm install npm run dev 2.安装 npm i lib-flexible --save ...
  • MIUI手机在测试中的问题解决方案

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,287
精华内容 19,714
关键字:

如何解决手机适配问题