适配_适配器 - CSDN
  • 随着智能手机的普及,移动端web开发需求越来越多,在做移动端web开发时首先要解决的就是适配问题,本文将介绍两种常用适配方案。 视口 在做移动端适配时,首先需要了解视口的概念,以及如何用viewport元标签设置视口...

    随着智能手机的普及,移动端web开发需求越来越多,在做移动端web开发时首先要解决的就是适配问题,本文将介绍两种常用适配方案。

    视口

    在做移动端适配时,首先需要了解视口的概念,以及如何用viewport元标签设置视口。

    1. 布局视口(layout viewport)

    • CSS布局,是以布局视口做为参照系来计算的。
    • 一般手机浏览器的默认布局视口宽度为980px(黑莓和IE的宽度为1024px)

    2. 视觉视口(visual viewport)

    • 视觉视口是页面当前显示在屏幕上的部分

    3. 理想视口(ideal viewport)

    • 理想视口的大小取决于设备独立像素的大小

    meta

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    复制代码
    • width=device-width 让布局视口的宽度等于设备独立像素的宽度,也就是布局视口的大小等于理想视口的大小
    • initial-scale=1 视觉视口的缩放比为1,视觉视口的大小等于理想视口的大小

    概念

    1. 物理像素(physical pixel)

    物理像素又被称为设备像素,是显示设备的最小物理单元

    2. 设备独立像素(density-independent pixel)

    设备独立像素也称为密度无关像素,一个可以由程序使用并控制的虚拟像素

    3. CSS像素

    CSS像素也称为设备无关的像素(device-independent pixel),简称DIPs。用于网页的布局。

    4. 设备像素比(device pixel ratio)

    设备像素比 = 物理像素 / 设备独立像素

    示例:iPhone6

    1. 物理像素:750pt * 1334pt
    2. 设备独立像素: 375pt * 667pt
    3. 设备像素比dpr:2

    适配方案

    1. rem适配

    rem的概念:

    • 根元素的字体大小计算,也就是html的font-size
    • 例:html的font-size为75px, 1rem的大小就是75px

    适配过程:

    1. 增加viewport的meta标签
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    复制代码
    1. js获取页面宽度,计算rem,并设置html的font-size
    var width = document.documentElement.clientWidth;
    var rem = width / 10;
    document.documentElement.style.fontSize = rem + 'px';
    复制代码
    1. 编写样式,根据设计稿计算rem值
    • 例:750px*1334px设计稿中,一块区域宽度为100px
    • CSS样式:
    .demo{
        width: 1.33333333rem; /* 1/(750/10)*100 */
    }
    复制代码
    • 在计算rem的时候,除数不一定是10,也可以是其他的数。
    • 例:var rem = width / 16, 在计算css样式时, width: 2.133333333rem /* 1/(750/16)*100 */
    • 在计算rem的时候,除数不能太大, 由于有些浏览器限制了最小字体,计算时会出现偏差。
    • 例如:设计稿为375px宽,有一块100px宽的区域,手机页面宽度也为375px,那么 手机上显示那块区域的宽度也应该为100px。当除数为50时,rem = 7.5px, 计算样式width = 1/(375/50)100 = 13.33333333rem,由于chrome强制字体最小值为12px,低于12px按12px处理,显示时认为是12px13.33333333=160px,这时显示达不到预期效果。

    2. vw适配

    viewport单位:

    • vw:是Viewport's width的简写,1vw等于window.innerWidth的1%
    • vh:和vw类似,是Viewport's height的简写,1vh等于window.innerHeihgt的1%
    • vmin:vmin的值是当前vw和vh中较小的值
    • vmax:vmax的值是当前vw和vh中较大的值

    适配过程:

    1. 增加viewport的meta标签
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    复制代码
    1. 编写样式,根据设计稿计算vw值
    • 例:750px*1334px设计稿中,一块区域宽度为100px
    • CSS样式
    .demo{
        width: 13.33333333; /* (1/(750*1%)*100) */
    }
    复制代码

    vw在某些设备上有兼容问题

    lib-flexible 适配方案

    1. 给html设置data-dpr
    • 苹果设备设置为window.devicePixelRatio获取到的设备像素比
    • 其他设备设置为1
    <!-- iphone6/7/8 -->
    <html data-dpr="2">
    ...
    </html>
    <!-- iphone6/7/8 Plus -->
    <html data-dpr="3">
    ...
    </html>
    <!-- 其他设备 -->
    <html data-dpr="1">
    ...
    </html>
    复制代码
    2. 设置viewport
    • 计算缩放比:var scale = 1 / dpr
    • 文档中插入viewport meta元素
    <!-- dpr = 1-->
    <meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
    <!-- dpr = 2 (iphone6/7/8) -->
    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
    <!-- dpr = 3 (iphone6/7/8 Plus) -->
    <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">
    复制代码
    3. 计算html的font-size
    • 获取页面宽度
    var width = document.documentElement.getBoundingClientRect().width
    复制代码
    • 计算rem
    var rem =  width / 10
    复制代码
    • 设置html的字体大小
    document.documentElement.style.fontSize = rem + 'px';
    复制代码

    示例:

    设计稿

    • 设计稿为750px * 1334px
    • 有一块区域个宽度为750px,高度为120px,有背景图,上面文字上下垂直方向都居中,字体大小为28px

    样式

    [data-dpr="1"] .demo{
    	font-size: 14px;
    }
    [data-dpr="2"] .demo{
    	font-size: 28px;
    }
    [data-dpr="3"] .demo{
    	font-size: 42px;
    }
    .demo{
    	width: 10rem; /*750/(750/10)*/
    	height: 1.6rem; /*120/(750/10)*/
    	line-height: 1.6rem;
    	text-align: center;
    	vertical-align: middle;
    	background: #000 url('./img/bg@2x.png') no-repeat;
    	background-size: cover;
    	color: #fff;
    }
    [data-dpr="3"] .demo{
    	background-image: url('./img/bg@3x.png');
    }
    复制代码
    • 实际开发中可使用Sass、LESS以及PostCSS自动转换rem
    • PostCSS插件:postcss-px2rem-dpr

    lib-flexible源码

    ;(function(win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        var flexibleEl = doc.querySelector('meta[name="flexible"]');
        var dpr = 0;
        var scale = 0;
        var tid;
        var flexible = lib.flexible || (lib.flexible = {});
    
        if (metaEl) {
            console.warn('将根据已有的meta标签来设置缩放比例');
            var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
            if (match) {
                scale = parseFloat(match[1]);
                dpr = parseInt(1 / scale);
            }
        } else if (flexibleEl) {
            var content = flexibleEl.getAttribute('content');
            if (content) {
                var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
                var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
                if (initialDpr) {
                    dpr = parseFloat(initialDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
                if (maximumDpr) {
                    dpr = parseFloat(maximumDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
            }
        }
    
        if (!dpr && !scale) {
            var isAndroid = win.navigator.appVersion.match(/android/gi);
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);
            var devicePixelRatio = win.devicePixelRatio;
            if (isIPhone) {
                // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                    dpr = 2;
                } else {
                    dpr = 1;
                }
            } else {
                // 其他设备下,仍旧使用1倍的方案
                dpr = 1;
            }
            scale = 1 / dpr;
        }
    
        docEl.setAttribute('data-dpr', dpr);
        if (!metaEl) {
            metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement('div');
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        }
    
        function refreshRem(){
            var width = docEl.getBoundingClientRect().width;
            if (width / dpr > 540) {
                width = 540 * dpr;
            }
            var rem = width / 10;
            docEl.style.fontSize = rem + 'px';
            flexible.rem = win.rem = rem;
        }
    
        win.addEventListener('resize', function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
    
        if (doc.readyState === 'complete') {
            doc.body.style.fontSize = 12 * dpr + 'px';
        } else {
            doc.addEventListener('DOMContentLoaded', function(e) {
                doc.body.style.fontSize = 12 * dpr + 'px';
            }, false);
        }
    
    
        refreshRem();
    
        flexible.dpr = win.dpr = dpr;
        flexible.refreshRem = refreshRem;
        flexible.rem2px = function(d) {
            var val = parseFloat(d) * this.rem;
            if (typeof d === 'string' && d.match(/rem$/)) {
                val += 'px';
            }
            return val;
        }
        flexible.px2rem = function(d) {
            var val = parseFloat(d) / this.rem;
            if (typeof d === 'string' && d.match(/px$/)) {
                val += 'rem';
            }
            return val;
        }
    
    })(window, window['lib'] || (window['lib'] = {}));
    复制代码

    转载于:https://juejin.im/post/5b0a87df6fb9a07abb24128e

    展开全文
  • web前端页面适配方法

    2018-10-23 09:09:21
    流式布局:就是百分比布局,非固定像素,内容向两侧填充,...适配要求: 1. 网页宽度必须和浏览器保持一致 2. 默认显示的缩放比例和PC端保持(缩放比例1.0) 3. 不允许用户自行缩放网页 满足这些要求达到了适...

    流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局

    视觉窗口:viewport,是移动端特有。这是一个虚拟的区域,承载网页的。

    承载关系:浏览器---->viewport---->网页

    适配要求:

    1. 网页宽度必须和浏览器保持一致

    2. 默认显示的缩放比例和PC端保持(缩放比例1.0)

    3. 不允许用户自行缩放网页

    满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。

    适配设置:

    如果任何设置都没有,默认走的就是viewport的默认设置

    去设置新的viewport设置,达到适配要求。

    <meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置

    viewport的功能:

    1. width 可以设置宽度 (device-width 当前设备的宽度)

    2. height 可以设置高度

    3. initial-scale 可以设置默认的缩放比例

    4. user-scalable 可以设置是否允许用户自行缩放

    5. maximum-scale 可以设置最大缩放比例

    6. minimum-scale 可以设置最小缩放比例

    在<meta name="viewport" content="" > content="" 使用以上参数

    1. width=device-width 宽度一致比例是1.0

    2. initial-scale=1.0 宽度一致比例是1.0

    3. user-scalable=no 不允许用户自行缩放 (yes,no 1,0)

    标准适配方案:

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

    meta:vp + tab 快捷方式

     

    展开全文
  • 百分比适配方式 这种方法,只是宽度能适配,高度不能适配,只能设置某个高度固定死 需求:是四个div高度为100px,宽度等宽横向排列 <!DOCTYPE html> <html lang="en"> <head> <meta ...

    百分比适配方式

    这种方法,只是宽度能适配,高度不能适配,只能设置某个高度固定死

    需求:是四个div高度为100px,宽度等宽横向排列

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width,user-scalable=no">
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 25%;
                height: 100px;
                float: left;
            }
            .box1 {
                background: red;
            }
            .box2 {
                background: blue;
            }
            .box3 {
                background: green;
            }
            .box4 {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
    </html>

     

     

    动态生成viewport适配方式

    这种方式其实是动态设置缩放比例,动态创建meta标签,并且将计算出来的缩放比例放到这个标签的content属性里面

    如果目标尺寸设置320,那么整个屏幕宽度就是320px,设置为750那么整个屏幕就是750px,这样我们页面中的每个元素就可以根据设计图来设置宽高了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            (function(){
                var w = window.screen.width;
                var targetW = 320;
                var scale = w/targetW; //当前尺寸/目标尺寸
                var meta = document.createElement("meta");
                meta.name = "viewport";
                meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
                console.log(scale);
                document.head.appendChild(meta);
            })();
        </script>
        <!--
        <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
        -->
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 80px;
                height: 100px;
                float: left;
            }
            .box1 {
                background: red;
            }
            .box2 {
                background: blue;
            }
            .box3 {
                background: green;
            }
            .box4 {
                background: yellow;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </body>
    </html>

     

     

    rem适配方式

    rem适配方式第一步首先需要设置视口的约束(固定的)

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    先来看一下在rem适配之前是怎么样的

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <title>Title</title>
    </head>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
    <body>
      <div class="box"></div>
    </body>
    </html>

    分析运行结果,当屏幕的宽度是320的时候,这个box的宽度比例是200/320,当换一个手机屏幕大小不一样的,比如375的那么box的宽度比例是200/375

    那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了,所以呈现的效果也是不一样的

    那么对于这个问题可以使用rem来做适配,rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度,这样整个屏幕就变成了1rem为基准,然后在设置每个元素的时候试用rem来做单位

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <title>Title</title>
    </head>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        width:2rem;
        height: 0.5rem;
        background-color: red;
      }
    </style>
    <script>
      (function () {
        // 获取屏幕区域的宽度
        var w = document.documentElement.clientWidth
    
        // 获取html根元素
        var htmlNode = document.querySelector('html')
    
        // 设置字体大小
        htmlNode.style.fontSize = w + 'px'
      })()
    </script>
    <body>
      <div class="box"></div>
    </body>
    </html>

    这样当我们屏幕宽度是320的时候,1rem就等于320 ,2rem就等于2*320,当屏幕宽度是375的时候1rem就等于375,也就是说1rem会随着屏幕的宽度来变化适应

     

     

    其他适配插件

    项目开发中可以使用上面这几种方式去做移动端的适配也可以使用一些插件来帮我们做这个适配,比如:lib-flexible和postcss-px2rem

    使用方法查看这篇文章:基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    展开全文
  • JAVA适配者模式

    2018-08-26 22:42:44
    适配者模式 1、适配器模式的概念 2、适配器的UML图 3、适配器的实现 4、适配器的优缺点 5、适合的场景 6、总结     红色代表重点,黑色代表废话!蓝色觉得好看。 1、适配器模式的概念 Adapter ...

    目录

    适配者模式

    1、适配器模式的概念

    2、适配器的UML图

    3、适配器的实现

    4、适配器的优缺点

    5、适合的场景

    6、总结

     


     

    红色代表重点,黑色代表废话!蓝色觉得好看

    1、适配器模式的概念

    Adapter pattern 适配器模式:按照我得理解就是一个手机的转换头,将两个不兼容的东西能够混在一起用!

    适配器模式:将一个类的接口转换成客户希望的另一个接口。适配器模式让哪些接口不兼容的类可以一起工作。

    现实中的适配器例子就是充电线,在传输过程中我们是高压传输电流,到了家里一般来说都是220V!但是我们手机,电视机,冰箱等。使用的并没有220V,这个时候充电线就相当于了一个适配器!目的就是让手机几V的电压能够使用220V的电压!总而言之,言而总之:适配器就是让两个不兼容的类能够一起用!


    2、适配器的UML图

    适配器模式包括两种类型:适配器和对象适配器!类适配器,适配者和适配器是继承或实现的关系,对象适配器中,适配者和适配器是关联关系。由于JAVA单继承所以一般来说对象适配器更加常用也更加灵活

    Target: 目标类,目标抽象类定义客户所需的接口,可以是一个抽象类,接口或者是具体类。在类适配器中只能够是接口!因为JAVA只支持单继承但可以多实现!

    Adapter:适配器类,它通过继承一个目标类,调用另一个接口。使其产生练习!Adapter是适配器模式的核心类!在类适配器中,适配器类通过继承适配者类和实现目标类,通过继承实现的方式使其产生联系。在对象适配器中,通过继承目标类关联适配者使其产生联系。

    Adaptee:适配者类,它一般来说是定义的一个接口,然后有客户端所需要的方法。

    类适配器UML图:

    public class Adapter implements Adaptee extends Target{
        //实现了Target的方法
        public void request(){
            //使用的是Adaptee中的实现
            super.specificRequest();
    
        }
    
    }

    对象适配器UML图:

    public class Adapter extends Target{
        //对象适配器
        //关联适配者类
        private Adaptee adaptee;    
        //创建适配者
        public Adapter(){
            adaptee = new Adaptee;
        }
        //调用
        public run (){
         adaptee.specificRequest();
        }
    }

    两者最大的不同在于,继承还是调用!


    3、适配器的实现

    做一个简单的实现:当警车跑,边跑边叫边发光。

    目标类:carcontroller

    package AdapterPattern;
    /**
     * 
    * <p>Title: CarController</p>  
    * <p>Description: 此类为适配器模式中的目标抽象类模拟的汽车控制类</p>  
    * @author HAND_WEILI  
    * @date 2018年8月21日
     */
    public abstract class CarController {
    	//此方法中有一个可以移动的方法 。
    	public void move() {
    		System.out.println("玩具汽车正在移动");
    	}
    	//抽象两个方法一个控制声音,一个控制灯光,这两个方法是另外两个接口的方法,需要通过适配器获取。
    	public abstract void voice();//声音
    	public abstract void light(); //灯光
    
    }
    

     

    适配类:PoliceLight

    package AdapterPattern;
    /**
     * 
    * <p>Title: PoliceLight</p>  
    * <p>Description:类似于声音类 </p>  
    * @author HAND_WEILI  
    * @date 2018年8月21日
     */
    public class PoliceLight {
    	public void alarmLight() {
    		System.out.println("发出灯光");
    	}
    }
    

    适配类:PoliceSound 

    package AdapterPattern;
    /**
     * 
    * <p>Title: PoliceSound</p>  
    * <p>Description: 此类为是Aptee类,简单的说就是这个类的方法,目标类想要用,我们需要通过适配器获得这个方法</p>  
    * @author HAND_WEILI  
    * @date 2018年8月21日
     */
    public class PoliceSound {
    	//sound
    	public void alarmSound() {
    		System.out.println("发出警笛声");
    	}
    
    }
    

     

    适配器类:PoliceCarAdapter  

    package AdapterPattern;
    /**
     * 
    * <p>Title: PoliceCarAdapter</p>  
    * <p>Description:此类是适配器模式中的的适配器类,适配器就像一个变压器,将不同的类结合在一起或者说通信 </p>  
    * @author HAND_WEILI  
    * @date 2018年8月21日
     */
    public class PoliceCarAdapter extends CarController {
    	private PoliceLight policeLight;
    	private PoliceSound policeSound;
    	//此处用的是对象适配器s
    	public PoliceCarAdapter() {
    		//此构造方法用来new对应的适配类
    		policeLight = new PoliceLight();
    		policeSound = new PoliceSound();
    	}
    
    	@Override
    	public void voice() {
    		// TODO Auto-generated method stub
    		//记得要新建new对象
    		policeLight.alarmLight();
    	}
    
    	@Override
    	public void light() {
    		// TODO Auto-generated method stub
    		policeSound.alarmSound();
    	}
    
    }
    

     

    这个实例使用的是对象适配器模式,更加方便常用灵敏!


    4、适配器的优缺点

            适配器模式将现有接口转化为客户类所期望的接口,实现了对现有类的复用,它是一种使用频率非常高的设计模式,在软件开发中得到了广发的应用。

     优点:

          1、  将目标类和适配者类解耦,通过适配器类进行适配者类的重用,无需再改变原有的结构。

          2、增加了类的透明性和复用性,将业务的实现过程封装再适配者类中,一个适配者可以通过不同的适配器再不同的系统中进行复用。

          3、灵活性和扩展性都非常好,通过使用配置文件可以很方便地更换适配器,也可以不修改源代码的基础上增加新的适配器类。

      缺点:

         1、对于JAVA、C#之类的单继承面向对象的语言,一次只能适配一个适配类不能同时适配多个适配者类。

         2、适配者不能够是最终类,因为需要继承。在JAVA中就是不能为Final类!

     


    5、适合的场景

           在以下情况下可以考虑使用适配者模式:

          1、系统需要使用一些现有的类,而这些现有的类不符合系统的需要,比如名字,比如方法设置冲突。

         2、想创建一个可以重复使用的类,用于和一些彼此之间没有太大关联的类,包括第三方类。要一起工作!


    6、总结

           适配者类的概念关键就是将两个不太兼容的集成到适配者类中,然后客户通过适配器类能够调用目标类和适配者类两个的方法。就相当于一个并集!在以后进行开发时可以找类似可以使用这种设计模式的地方,提高代码的可重用性,和灵活性!


     

     

    展开全文
  • 头条适配是根据设计图宽度,算出density(可以理解为密度),继而算出dpi,替换系统中的dpi.则XML即可按照UI所给设计图设置宽度.达到适配目的. 使用方式: 直接在Application的onCreate方法中调用 import android.app...
  • 移动端适配的五种方法 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 第一种方法:viewport适配 原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var ...
  • Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因、重要概念、解决方案及最佳实践,我相信如果你能认真的学习本文,对于Android的...
  • 本人未雨绸缪,学习一波移动端适配方案。 0. 移动端 vs PC端区别 1. 页面的三个视窗和缩放 1.1 layout viewport和visual viewport: 1.2 ideal viewport: 1.3 页面的缩放 2. 移动端适配 2.1 使用meta标签控制...
  • Android 屏幕适配方案

    2015-08-01 13:20:53
    1、概述大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比。如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实...
  • 转载请标明出处: ... 本文出自:【张鸿洋的博客】 一、概述相信Android的开发者对于设配问题都比较苦恼,Google官方虽然给出了一系列的建议,但是...个人也比较关注适配的问题,之前也发了几篇关于适配的文章,大致有:
  • 本文将从三个角度介绍Android Q的部分适配问题,也是大家开发适配过程中大概率会遇到的问题: Q 行为变更:所有应用 (不管targetSdk是多少,对所有跑在Q设备上的应用均有影响) Q 行为变更:以 Android Q 为目标...
  • 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。 安卓原生的话有自己的适配规则,可以根据不同的尺寸建立...
  • 前端iPhone刘海屏适配

    2020-05-22 15:12:32
    对于iPhone系列出的越来越多,如果只是使用@media来做适配的话,老代码想要适配新机型还是有一定局限性的。 今天去搜了搜相关的解决方法,那么就来总结一下。 安全区 早期苹果对于 iPhone X 的设计布局意见如下: ...
  • 这篇博客主要介绍的是 Android 主流各种机型和各种版本的悬浮窗权限适配,但是由于碎片化的问题,所以在适配方面也无法做到完全的主流机型适配,这个需要大家的一起努力,这个博客的名字永远都是一个将来时,感兴趣...
  • 在过去多个项目中一直使用dimens适配,这种适配方式的优点很明显,不用管什么dp还是dpi这些东西,只需要以一种屏幕分辨率为基准(例如1280x720,相当于把屏幕宽分成720份,高分成1280份),生成对应屏幕分辨率的的dimens文件...
  • 从初代iPhone3GS到现如今的...如何适配不同的屏幕尺寸,使UI更加协调美观,这给iPhone/iOS应用开发者带来了挑战。 本文结合个人在iOS UI开发和适配方面的粗浅经验,对常用屏幕适配相关因素做个梳理盘点,以备日后查阅。
  • 屏幕适配之图片适配

    2017-09-20 21:33:42
    屏幕适配总共有6种(我知道的):图片适配,dimens适配,布局(Layout)适配,权重适配,百分比适配; 今天只说图片适配:图片适配主要是根据不同的手机密度,设置显示不同大小的图片; 下面首先说明下我们为什么要...
  • Android 8.0图标适配

    2019-08-05 16:57:17
    1.为什么要进行图标适配 android 8.0中 如果不对图标进行适配就会出现白底图标,比如饿了吗,小黄车等软件 图标虽然那个对系统功能不会有影响,但是对于“强迫症”用户体验会非常不好,那么什么情况下需要图标...
  • Android dp方式的屏幕适配-原理 传统所说的屏幕适配,其实是针对不同屏幕的UI尺寸适配,即在编写页面时使用了具体的dp、sp值后导致的其他问题。 我之前写过一些相关的文章和工具插件,也收到了很多网友的反馈。 ...
  • 对于安卓来发开说,最令人头疼的就是适配问题了,三星S8的18.5:9,小米的MIX 17:9 ,全面屏的出现给开发者带来了适配的问题,虽然不影响功能的使用,但是下面的黑条条确实很影响美观,影响用户用户,废话不说了,下面...
1 2 3 4 5 ... 20
收藏数 234,036
精华内容 93,614
关键字:

适配