适配_适配器 - CSDN
精华内容
参与话题
  • 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 快捷方式

     

    展开全文
  • Android 屏幕适配方案

    万次阅读 多人点赞 2015-08-01 13:20:53
    1、概述大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比。如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实...

    转载请标明出处:
    http://blog.csdn.net/lmj623565791/article/details/45460089
    本文出自:【张鸿洋的博客】

    1、概述

    大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比。如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实适配的问题在web页面的设计中理论上也存在,为什么这么说呢?电脑的显示器的分辨率、包括手机分辨率,我敢说分辨率的种类远超过Android设备的分辨率,那么有一个很奇怪的现象:

    为什么Web页面设计人员从来没有说过,尼玛适配好麻烦?

    那么,到底是什么原因,让网页的设计可以在千差万别的分辨率的分辨率中依旧能给用户一个优质的体验呢?带着这个疑惑,我问了下媳妇(前端人员),媳妇睁大眼睛问我:什么叫适配?fc,尼玛,看来的确没有这类问题。后来再我仔细的追问后,她告诉我,噢,这个尺寸呀,我都是设置为20%的~~追根到底,其实就是一个原因,网页提供了百分比计算大小。

    同样的,大家拿到UI给的设计图以后,是不是抱怨过尼玛你标识的都是px,我项目里面用dp,这什么玩意,和UI人员解释,UI妹妹也不理解。那么本例同样可以解决Android工程师和UI妹妹间的矛盾~UI给出一个固定尺寸的设计稿,然后你在编写布局的时候不用思考,无脑照抄上面标识的像素值,就能达到完美适配,理想丰不丰满~~。

    然而,Android对于不同的屏幕给出的适配方案是dp,那么dp与百分比的差距到底在哪里?

    2、dp vs 百分比

    • dp

    我们首先看下dp的定义:

    Density-independent pixel (dp)独立像素密度。标准是160dip.即1dp对应1个pixel,计算公式如:px = dp * (dpi / 160),屏幕密度越大,1dp对应 的像素点越多。
    上面的公式中有个dpi,dpi为DPI是Dots Per Inch(每英寸所打印的点数),也就是当设备的dpi为160的时候1px=1dp;

    好了,上述这些概念记不记得住没关系,只要记住一点dp是与像素无关的,在实际使用中1dp大约等于1/160inch。

    那么dp究竟解决了适配上的什么问题?可以看出1dp = 1/160inch;那么它至少能解决一个问题,就是你在布局文件写某个View的宽和高为160dp*160dp,这个View在任何分辨率的屏幕中,显示的尺寸大小是大约是一致的(可能不精确),大概是 1 inch * 1 inch。

    但是,这样并不能够解决所有的适配问题:

    • 呈现效果仍旧会有差异,仅仅是相近而已
    • 当设备的物理尺寸存在差异的时候,dp就显得无能为力了。为4.3寸屏幕准备的UI,运行在5.0寸的屏幕上,很可能在右侧和下侧存在大量的空白。而5.0寸的UI运行到4.3寸的设备上,很可能显示不下。

    以上两点,来自参考链接1

    一句话,总结下,dp能够让同一数值在不同的分辨率展示出大致相同的尺寸大小。但是当设备的尺寸差异较大的时候,就无能为力了。适配的问题还需要我们自己去做,于是我们可能会这么做:

    <?xml version="1.0" encoding="utf-8"?>  
    <resources>  
        <!-- values-hdpi 480X800 -->  
        <dimen name="imagewidth">120dip</dimen>      
    </resources>  
    
    <resources>  
        <!-- values-hdpi-1280x800 -->  
        <dimen name="imagewidth">220dip</dimen>      
    </resources>  
    
    
    <?xml version="1.0" encoding="utf-8"?>  
    <resources>  
        <!-- values-hdpi  480X320 -->  
        <dimen name="imagewidth">80dip</dimen>      
    </resources> 

    上述代码片段来自网络,也就是说,我们为了优质的用户体验,依然需要去针对不同的dpi设置,编写多套数值文件。

    可以看出,dp并没有能解决适配问题。下面看百分比。

    • 百分比
      这个概念不用说了,web中支持控件的宽度可以去参考父控件的宽度去设置百分比,最外层控件的宽度参考屏幕尺寸设置百分比,那么其实中Android设备中,只需要支持控件能够参考屏幕的百分比去计算宽高就足够了。

    比如,我现在以下几个需求:

    • 对于图片展示的Banner,为了起到该有的效果,我希望在任何手机上显示的高度为屏幕高度的1/4
    • 我的首页分上下两栏,我希望每个栏目的屏幕高度为11/24,中间间隔为1/12
    • slidingmenu的宽度为屏幕宽度的80%

    当然了这仅仅是从一个大的层面上来说,其实小范围布局,可能百分比将会更加有用。

    那么现在不支持百分比,实现上述的需求,可能需要1、代码去动态计算(很多人直接pass了,太麻烦);2、利用weight(weight必须依赖Linearlayout,而且并不能适用于任何场景)

    再比如:我的某个浮动按钮的高度和宽度希望是屏幕高度的1/12,我的某个Button的宽度希望是屏幕宽度的1/3。

    上述的所有的需求,利用dp是无法完成的,我们希望控件的尺寸可以按照下列方式编写:

       <Button
            android:text="@string/hello_world"
            android:layout_width="20%w"
            android:layout_height="10%h"/>

    利用屏幕的宽和高的比例去定义View的宽和高。

    好了,到此我们可以看到dp与百分比的区别,而百分比能够更好的解决我们的适配问题。

    • some 适配tips

    我们再来看看一些适配的tips

    1. 多用match_parent
    2. 多用weight
    3. 自定义view解决

    其实上述3点tip,归根结底还是利用百分比,match_parent相当于100%参考父控件;weight即按比例分配;自定义view无非是因为里面多数尺寸是按照百分比计算的;

    通过这些tips,我们更加的看出如果能在Android中引入百分比的机制,将能解决大多数的适配问题,下面我们就来看看如何能够让Android支持百分比的概念。

    3、百分比的引入

    1、引入

    其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹。

    如下图:

    20150503174449732

    然后我们根据一个基准,为基准的意思就是:

    比如480*320的分辨率为基准

    • 宽度为320,将任何分辨率的宽度分为320份,取值为x1-x320
    • 高度为480,将任何分辨率的高度分为480份,取值为y1-y480

    例如对于800*480的宽度480:

    20150503180400049

    可以看到x1 = 480 / 基准 = 480 / 320 = 1.5 ;

    其他分辨率类似~~
    你可能会问,这么多文件,难道我们要手算,然后自己编写?不要怕,下文会说。

    那么,你可能有个疑问,这么写有什么好处呢?

    假设我现在需要在屏幕中心有个按钮,宽度和高度为我们屏幕宽度的1/2,我可以怎么编写布局文件呢?

    <FrameLayout >
    
        <Button
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/hello_world"
            android:layout_width="@dimen/x160"
            android:layout_height="@dimen/x160"/>
    
    </FrameLayout>
    

    可以看到我们的宽度和高度定义为x160,其实就是宽度的50%;
    那么效果图:

    20150503180542414

    可以看到不论在什么分辨率的机型,我们的按钮的宽和高始终是屏幕宽度的一半。

    • 对于设计图

    假设现在的UI的设计图是按照480*320设计的,且上面的宽和高的标识都是px的值,你可以直接将px转化为x[1-320],y[1-480],这样写出的布局基本就可以全分辨率适配了。

    你可能会问:设计师设计图的分辨率不固定怎么办?下文会说~

    • 对于上文提出的几个dp做不到的

    你可以通过在引入百分比后,自己试试~~

    好了,有个最主要的问题,我们没有说,就是分辨率这么多,尼玛难道我们要自己计算,然后手写?

    2、自动生成工具

    好了,其实这样的文件夹手写也可以,按照你们需要支持的分辨率,然后编写一套,以后一直使用。

    当然了,作为程序员的我们,怎么能做这么low的工作,肯定要程序来实现:

    那么实现需要以下步骤:

    1. 分析需要的支持的分辨率

    对于主流的分辨率我已经集成到了我们的程序中,当然对于特殊的,你可以通过参数指定。关于屏幕分辨率信息,可以通过该网站查询:http://screensiz.es/phone

    1. 编写自动生成文件的程序

    代码如下

    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.PrintWriter;
    
    /**
     * Created by zhy on 15/5/3.
     */
    public class GenerateValueFiles {
    
        private int baseW;
        private int baseH;
    
        private String dirStr = "./res";
    
        private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";
        private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\n";
    
        /**
         * {0}-HEIGHT
         */
        private final static String VALUE_TEMPLATE = "values-{0}x{1}";
    
        private static final String SUPPORT_DIMESION = "320,480;480,800;480,854;540,960;600,1024;720,1184;720,1196;720,1280;768,1024;800,1280;1080,1812;1080,1920;1440,2560;";
    
        private String supportStr = SUPPORT_DIMESION;
    
        public GenerateValueFiles(int baseX, int baseY, String supportStr) {
            this.baseW = baseX;
            this.baseH = baseY;
    
            if (!this.supportStr.contains(baseX + "," + baseY)) {
                this.supportStr += baseX + "," + baseY + ";";
            }
    
            this.supportStr += validateInput(supportStr);
    
            System.out.println(supportStr);
    
            File dir = new File(dirStr);
            if (!dir.exists()) {
                dir.mkdir();
    
            }
            System.out.println(dir.getAbsoluteFile());
    
        }
    
        /**
         * @param supportStr
         *            w,h_...w,h;
         * @return
         */
        private String validateInput(String supportStr) {
            StringBuffer sb = new StringBuffer();
            String[] vals = supportStr.split("_");
            int w = -1;
            int h = -1;
            String[] wh;
            for (String val : vals) {
                try {
                    if (val == null || val.trim().length() == 0)
                        continue;
    
                    wh = val.split(",");
                    w = Integer.parseInt(wh[0]);
                    h = Integer.parseInt(wh[1]);
                } catch (Exception e) {
                    System.out.println("skip invalidate params : w,h = " + val);
                    continue;
                }
                sb.append(w + "," + h + ";");
            }
    
            return sb.toString();
        }
    
        public void generate() {
            String[] vals = supportStr.split(";");
            for (String val : vals) {
                String[] wh = val.split(",");
                generateXmlFile(Integer.parseInt(wh[0]), Integer.parseInt(wh[1]));
            }
    
        }
    
        private void generateXmlFile(int w, int h) {
    
            StringBuffer sbForWidth = new StringBuffer();
            sbForWidth.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
            sbForWidth.append("<resources>");
            float cellw = w * 1.0f / baseW;
    
            System.out.println("width : " + w + "," + baseW + "," + cellw);
            for (int i = 1; i < baseW; i++) {
                sbForWidth.append(WTemplate.replace("{0}", i + "").replace("{1}",
                        change(cellw * i) + ""));
            }
            sbForWidth.append(WTemplate.replace("{0}", baseW + "").replace("{1}",
                    w + ""));
            sbForWidth.append("</resources>");
    
            StringBuffer sbForHeight = new StringBuffer();
            sbForHeight.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
            sbForHeight.append("<resources>");
            float cellh = h *1.0f/ baseH;
            System.out.println("height : "+ h + "," + baseH + "," + cellh);
            for (int i = 1; i < baseH; i++) {
                sbForHeight.append(HTemplate.replace("{0}", i + "").replace("{1}",
                        change(cellh * i) + ""));
            }
            sbForHeight.append(HTemplate.replace("{0}", baseH + "").replace("{1}",
                    h + ""));
            sbForHeight.append("</resources>");
    
            File fileDir = new File(dirStr + File.separator
                    + VALUE_TEMPLATE.replace("{0}", h + "")//
                            .replace("{1}", w + ""));
            fileDir.mkdir();
    
            File layxFile = new File(fileDir.getAbsolutePath(), "lay_x.xml");
            File layyFile = new File(fileDir.getAbsolutePath(), "lay_y.xml");
            try {
                PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
                pw.print(sbForWidth.toString());
                pw.close();
                pw = new PrintWriter(new FileOutputStream(layyFile));
                pw.print(sbForHeight.toString());
                pw.close();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }
    
        public static float change(float a) {
            int temp = (int) (a * 100);
            return temp / 100f;
        }
    
        public static void main(String[] args) {
            int baseW = 320;
            int baseH = 400;
            String addition = "";
            try {
                if (args.length >= 3) {
                    baseW = Integer.parseInt(args[0]);
                    baseH = Integer.parseInt(args[1]);
                    addition = args[2];
                } else if (args.length >= 2) {
                    baseW = Integer.parseInt(args[0]);
                    baseH = Integer.parseInt(args[1]);
                } else if (args.length >= 1) {
                    addition = args[0];
                }
            } catch (NumberFormatException e) {
    
                System.err
                        .println("right input params : java -jar xxx.jar width height w,h_w,h_..._w,h;");
                e.printStackTrace();
                System.exit(-1);
            }
    
            new GenerateValueFiles(baseW, baseH, addition).generate();
        }
    
    }

    同时我提供了jar包,默认情况下,双击即可生成,使用说明:

    20150503173911632

    下载地址见文末,内置了常用的分辨率,默认基准为480*320,当然对于特殊需求,通过命令行指定即可:

    例如:基准 1280 * 800 ,额外支持尺寸:1152 * 735;4500 * 3200;

    20150503173719049

    按照

    java -jar xx.jar width height width,height_width,height

    上述格式即可。

    到此,我们通过编写一个工具,根据某基准尺寸,生成所有需要适配分辨率的values文件,做到了编写布局文件时,可以参考屏幕的分辨率;在UI给出的设计图,可以快速的按照其标识的px单位进行编写布局。基本解决了适配的问题。

    本方案思想已经有公司投入使用,个人认为还是很不错的,如果大家有更好的方案来解决屏幕适配的问题,欢迎留言探讨或者直接贴出好文链接,大家可以将自己的经验进行分享,这样才能壮大我们的队伍~~。

    注:本方案思想来自Android Day Day Up 一群的【blue-深圳】,经其同意编写此文,上述程序也很大程度上借鉴了其分享的源码。在此标识感谢,预祝其创业成功!

    ===>后期更新

    Google已经添加了百分比支持库,详情请看:Android 百分比布局库(percent-support-lib) 解析与扩展

    ok~

    群号:463081660,欢迎入群

    下载地址

    微信公众号:hongyangAndroid
    (欢迎关注,第一时间推送博文信息)
    1422600516_2905.jpg

    参考链接

    Android多屏幕适配学习笔记

    开源,原创,实用Android 屏幕适配方案分享

    展开全文
  • 在Andorid手机的系统设置中有改变字体大小的功能,如果你没有进行适配的话,字体变大,布局混乱,就会造成尴尬处境 通用解决方案 : sp 转为 dp 属性 改变前 : &amp;lt;TextView android:layout_width=...

    本文目前处于残缺,请您移步,之后会抽时间补齐,补齐之后会删除此行

    • 分辨率
    • 不同分辨率的换算比例
    • 图片适配
    • 字体适配

    字体适配

    在Andorid手机的系统设置中有改变字体大小的功能,如果你没有进行适配的话,字体变大,布局混乱,就会造成尴尬处境

    通用解决方案 :

    sp 转为 dp 属性

    改变前 :

    <TextView 
    		android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:text="转变前"/>
    

    改变后 :

    <TextView 
    		android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25dp"
            android:text="转变后"/>
    

    当设置dp属性后,在任何分辨率下字体大小都是不变的,同样在系统设置内更改字体也无法对我们的app造成影响

    所遇问题:

    • 部分尺寸不在我们适配范围,需要特殊处理

    解决思路:

    计算特殊场景的宽高比,通过if/else判断进行对应的图片加载~ 代码如下(来源于我目前项目的红米Max5引导图适配)
    这里写图片描述

    android res目录下可以配置多个values,用以适配各种机型。

    今天来介绍下最小屏幕宽度的适配,及其计算规则。

    先来说下适配规则:

    加入项目中配置了values,values-320dp,values-400dp三个配置文件。手机计算来的最小宽度是360,那么他就会向下适配,找到320dp中配置的资源文件,以此为准。

    计算规则:

    sw(最小宽度)=ppi / inch(屏幕尺寸)

    ppi=\sqrt{x{2}+y{2}} x,y位屏幕的宽高


    **扩展文章
    **

    展开全文
  • H5移动端适配总结

    千次阅读 2019-06-17 16:28:07
    近段时间以来在做微信公众号的H5开发,然而安装UI设计人员给出的尺寸在不同的移动端设备上的表现并不一致,并且在界面适配方面本以为只要在开发过程中尽量使用百分比和flex布局等就可以实现,然而在不同分辨率的手机...

    近段时间以来在做微信公众号的H5开发,然而安装UI设计人员给出的尺寸在不同的移动端设备上的表现并不一致,并且在界面适配方面本以为只要在开发过程中尽量使用百分比和flex布局等就可以实现,然而在不同分辨率的手机上看到的效果并不让人满意,布局虽然没有很大的变化,但是字体和图片都出现了失真或者变形的情况。

    因此通过查阅资料,了解到两种屏幕适配的方案:1.通过对界面进行等比例缩放;2.使用rem单位进行界面的适配。

    1、第一种方式属于有一种暴力适配,即通过计算设计人员给出的设计稿的尺寸和设备的真实尺寸,将这个比值作为缩放比赋值飞meta标签,但是这种情况下往往会出现字体和图片的失真或者锐化。

    实现代码大致如下:

     /*以下代码通过缩放方式实现为不同屏幕下适配设计稿尺寸js(不推荐)*/
         function flex(designWidth){
           let phoneScale = parseInt(window.screen.width) / designWidth;
           document.write('<meta name="viewport" content="width=' + designWidth + ',minimum-scale=' + phoneScale + ',maximum-scale=' + phoneScale + ',user-scalable=no">');
         };
    

    2、第二种方式是通过rem这个新的单位进行适配。要了解这种方式我们必须了解rem这个单位是什么意思,实际上每rem就是界面根元素上设置的字体大小。

    比如:我们设置html标签的样式为

    html:{
      font-sise:20px;
    }

    那么1rem即为20px。

    理解了rem的意义之后我们再谈界面的适配,我们要实现对不同尺寸的界面的适配,那么我们只要根据不同尺寸的界面给界面的根元素设置不同的字体大小即可,这样rem这个我们要使用的单位代表的尺寸就会随着界面的尺寸的改变而改变了,我们就可以按照设计稿给出的尺寸来写我们的前端样式了。

    这个适配的代码主要分为以下几步:

    1、设置基准字体大小

    2、设置界面尺寸变化事件的监听,刷新基准字体大小

    3、在布局中使用rem单位编写界面样式

    代码如下:

      /*以下代码为不同屏幕下字体通过rem适配设计稿的方案
        @designWidth 设计稿的全屏宽度
        @maxWidth  适配的最大宽度
      */
        (function(designWidth, maxWidth) {
           var doc = document,
            win = window;
          var docEl = doc.documentElement;
          var remStyle = document.createElement("style");
          //获取基准字体大小
          function refreshRem() {
            // var width = parseInt(window.screen.width); // uc有bug
            var width = docEl.getBoundingClientRect().width;
            if (!maxWidth) {
              maxWidth = 750;
            };
            if (width > maxWidth) {
              width = maxWidth;
            }
            var rem = width/designWidth*100;
            //得到的rem基准字体大小,这里乘以100是为了适配有的浏览器不识别小数,会导致设置字体无效。
            //设置根元素html的字体大小为基准字体大小,在css中每rem就是这个值的大小。
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;} ';
          }
          refreshRem();
          if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
          } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
          }
         /* 以下为在不同的时机重新计算rem*/
          win.addEventListener("resize", function() {
            // clearTimeout(tid); //防止执行两次
            // tid = setTimeout(refreshRem, 50);
             refreshRem()
          }, false);
    
          win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
              refreshRem()
              // clearTimeout(tid);
              // tid = setTimeout(refreshRem,50);
            }
          }, false);
        })(750, 750);
     

    执行上面的代码之后,我们只需要将设计稿上的尺寸除以100,并将单位换成rem即可;

    比如:

    设计稿给出 

    div:{
      width:100px;
      height:100px;
    }

    那么我们需要写成:

    div:{
      width:1rem;
      height:1rem;
    }

    如有错误,还望指正,谢谢。

    展开全文
  • 关于UIViewAutoresizing UIView有一个autoresizingMask属性: @property(nonatomic) UIViewAutoresizing autoresizingMask; // simple resize. default is UIViewAutoresizingNone UIViewAutoresizing是一个option ...
  • Android适配之今日头条适配方案

    千次阅读 2019-08-30 11:18:38
    头条适配是根据设计图宽度,算出density(可以理解为密度),继而算出dpi,替换系统中的dpi.则XML即可按照UI所给设计图设置宽度.达到适配目的. 使用方式: 直接在Application的onCreate方法中调用 import android.app...
  • 前端移动端适配总结

    万次阅读 多人点赞 2018-02-28 10:29:49
    meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码:&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;但是,很多小伙伴只是感性的...
  • 前端解决移动端适配的五种方法

    千次阅读 2020-05-11 13:42:50
    移动端适配的五种方法 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 第一种方法:viewport适配 原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var ...
  • H5页面适配 iPhoneX,就是这么简单

    万次阅读 2018-04-19 20:28:38
    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见...
  • iPhone屏幕尺寸、分辨率及适配

    万次阅读 多人点赞 2017-07-29 12:08:57
    从初代iPhone3GS到现如今的...如何适配不同的屏幕尺寸,使UI更加协调美观,这给iPhone/iOS应用开发者带来了挑战。 本文结合个人在iOS UI开发和适配方面的粗浅经验,对常用屏幕适配相关因素做个梳理盘点,以备日后查阅。
  • 适配不同分辨率屏幕

    万次阅读 2016-06-29 11:25:04
    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计...
  • vue项目移动端适配的方法

    万次阅读 2020-10-13 09:32:51
    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途: 例如在Galaxy S III: 例如在iphone6/7/8: ...
  • android各版本分辨率适配(项目亲测)

    万次阅读 热门讨论 2019-01-05 15:30:58
    1. 写在前面本人项目使用的如下适配方式,已经迭代了几个版本,从开始的各种适配问题,到现在很少有人反馈手机适配问题,自己也在4-5个真机测试没什么问题。这种适配方式的理论支持我最开始是跟着鸿洋大神 一步步操...
  • html页面手机适配方法

    万次阅读 2018-03-29 11:16:44
    在head中添加&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"&gt; viewport :用户网页的可视...
  • html页面适配手机设定

    万次阅读 2016-12-09 16:32:21
    在html中header头添加以下语句
  • 对于安卓来发开说,最令人头疼的就是适配问题了,三星S8的18.5:9,小米的MIX 17:9 ,全面屏的出现给开发者带来了适配的问题,虽然不影响功能的使用,但是下面的黑条条确实很影响美观,影响用户用户,废话不说了,下面...
  • 移动端屏幕适配(Rem+js方法)

    万次阅读 2018-08-02 21:50:33
    1.什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样。 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距、留白,以及图片...
  • 最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案,亲测有效...
  • android最简单的平板适配方法

    万次阅读 2019-02-22 14:27:19
    其实通过dp这个单位和存放不同图片资源的文件夹(mdpi,xhdpi 等等),理论上安卓已经可以适配大部分的机型了。但是还有一些特殊机型不能适配,但是之前也没要求我们适配所有手机,所以做个两三套的图纸也能完成适配。 ...
  • Unity UGUI的适配方法总结

    万次阅读 2017-09-11 13:40:14
    刚开始研究Unity没多久,对UGUI系统的使用还没有实际开发经验,但是根据之前做cocos产品的适配策略,对UGUI的适配做了研究后发现UGUI的提供的适配方案还是蛮全面的,这里自我总结一下,希望能帮助刚使用UGUI做界面的...
1 2 3 4 5 ... 20
收藏数 239,855
精华内容 95,942
关键字:

适配