手机端适配策略以及实现

PascalXie 发布于2019-08-19 18:21 / 1369人阅读

摘要：设备本身的适配策略和的适配策略是不一样的。暂且称之为更大内容策略。个人认为的策略更为合理。这种情况一般作用于容器元素。用脚本实现有极少数布局上的问题似乎无能为力了。

设备本身的适配策略

ios和Android的适配策略是不一样的。

对于ios,一个设备含有越多的逻辑像素，那么这个设备也就越大，换句话说，ios的逻辑像素可以作为一个物理长度单位。应用的场景是这样的，用px单位设置了一个元素的大小，这个元素在不同大小的ios设备下实际上是一样大的。所以ios策略是更大的屏幕是为了显示更多的内容。暂且将它称之为更多内容策略。

然而对于Android设备，大致的情况是不管设备大小，包含的逻辑像素宽度都是360px。用px单位设置一个元素的大小，设备越大，它在设备上呈现的也等比变大。所以Android的策略是，屏幕越大是为了让内容看起来更大。暂且称之为更大内容策略。

个人认为ios的策略更为合理。但是由于我们无法获取设备的物理尺寸大小，所以也就没有办法在Android的设备上面应用更多内容策略。所以我决定就在ios的设备上面执行ios的更多内容策略，而在Android的设备上执行更大内容策略。

ios的适配的策略实现

根据更多内容策略，我们会遇到两种情况

第一种是元素大小不随设备屏幕变大而变大，比如屏幕、图标、导航栏等，因为我们需要为用户呈现更多的内容，这个时候使用的单位是px。

第二种情况，元素的大小需要随着设备的变大而变化。这种情况一般作用于容器元素。因为屏幕变大了，容器如果还是一样的大小就不符合呈现更多内容策略。这种情况的实现比较复杂，下面我们详细讨论这种情况下的解决方案。

百分比

百分比这个单位是参照父元素大小的相对单位。其实百分比可以解决大部分问题。

我需要一个占据整个屏幕大小的容器，下面的代码可以完美解决

.container { 
    width:100%; 
    height:100%; 
}

又或者我需要一个占据屏幕百分之五十的内容弹窗，至于高度就由内容决定吧

.dialog { 
    width:50%; 
    height:auto; 
}

对了它得居中，这也没什么问题

.dialog { 
    width:50%; 
    height:auto; 
    margin-left:-25%; 
    left:50%; 
}

但是，如何涉及到高度，百分比的问题就显现出来了。比如我想让上面的弹窗的高度为屏幕高度的60%，至于内容过多就让它内部滚动吧；

.dialog { 
    width:50%; 
    height:auto; 
    margin-left:-25%; 
    left:50%;
    height:60%;
}

似乎也没有什么问题，但是，如果我想让它上下居中

.dialog { 
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height:60%;
    margin-top:-30%;
    top:50%;
}

无奈的发现它并没有居中，问题就出在maring-top 百分比所参照的是父级元素的宽度而不是高度。终于发现了一个百分比无能为力的一个点了。

改变一下需求，我们需要一个正方形的弹窗，弹窗的宽度还是要求50%；

.dialog {
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height: ?%;
}

我们试着做了，但是他的高度应该是多少呢，确实百分比无能为力了。

vw & vh

vw 是将当前屏幕的宽度分为一百份之后的长度

wh 是将当前屏幕的高度分为一百份之后的长度

这几乎是对百分比方案的完美补充了。针对上面百分比无能为力的两个点，vw 和 vh 都能应对。

百分比高度元素的垂直居中

.dialog { 
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height:60vh;
    margin-top:-30vh;
    top:50%;
}

百分比宽度元素固定长宽比例

    .dialog { 
        width:50vw;
        margin-left:-25vw; 
        left:50%;
        height: 50vw;
}

但是遗憾的是 vw 和 vh 存在着不可忽视的兼容新问题;

用 rem 模拟 vw & vh

rem只能模仿 vw 和 vh 中的一个。因为一般比较常用的是vw，所以我们把 rem 当做 vw 使用。

可以使用脚本计算 html 的 rem，代码如下

var deviceWidth = window.screen.width;
document.querySelector("html").style.fontSize = (deviceWidth)+"px";

百分比宽度元素固定长宽比例

.dialog {
    width: 0.5 rem;
    margin-left: -0.25 rem;
    left: 50%;
    height: 0.25 rem;
}

由于 rem 只能模仿 vw vh 的一种所以这时候对于百分比高度元素的垂直居中的实现就无能为力了。

用脚本实现

有极少数布局上的问题 css似乎无能为力了。这个适合只能依靠万能的脚本了。

云服务器 GPU云服务器 html实现手机端移动端适配移动端适配方案移动端适配 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79488.html

手机端适配策略以及实现

摘要：设备本身的适配策略和的适配策略是不一样的。暂且称之为更大内容策略。个人认为的策略更为合理。这种情况一般作用于容器元素。用脚本实现有极少数布局上的问题似乎无能为力了。设备本身的适配策略 ios和Android的适配策略是不一样的。对于ios,一个设备含有越多的逻辑像素，那么这个设备也就越大，换句话说，ios的逻辑像素可以作为一个物理长度单位。应用的场景是这样的，用px单位设置了一个元...

xingqiba 2019-08-30 13:01 评论0 收藏0
浅谈设计模式1——策略模式 | 适配器模式 | 工厂模式

摘要：适配器模式要比策略模式要好理解一些。书中的适配器模式有两种实现方式，一种是通过代理，另一种是通过继承。通过工厂模式获得具体接口。而且工厂模式承担的压力过重，可能会导致职责的混乱。工厂方法模式这其实是工厂模式的一个简单的升级。前言最近在看《Think In JAVA》，其中在讲解继承，组合，抽象类和接口的时候，提到了题中的几个设计模式。这几个设计模式也确实让我更好的理解了JAVA中各...

0x584a 2019-08-16 10:39 评论0 收藏0
php设计模式

摘要：我们今天也来做一个万能遥控器设计模式适配器模式将一个类的接口转换成客户希望的另外一个接口。今天要介绍的仍然是创建型设计模式的一种建造者模式。设计模式的理论知识固然重要，但计算机程序的思维逻辑 (54) - 剖析 Collections - 设计模式上节我们提到，类 Collections 中大概有两类功能，第一类是对容器接口对象进行操作，第二类是返回一个容器接口对象，上节我们介绍了...

Dionysus_go 2019-06-28 14:37 评论0 收藏0
php设计模式

摘要：我们今天也来做一个万能遥控器设计模式适配器模式将一个类的接口转换成客户希望的另外一个接口。今天要介绍的仍然是创建型设计模式的一种建造者模式。设计模式的理论知识固然重要，但计算机程序的思维逻辑 (54) - 剖析 Collections - 设计模式上节我们提到，类 Collections 中大概有两类功能，第一类是对容器接口对象进行操作，第二类是返回一个容器接口对象，上节我们介绍了...

vspiders 2019-06-28 14:33 评论0 收藏0
服务API版本控制设计与实践

摘要：场景一版本号控制随着互联网发展的，用户体验要求也是越来越高，产品形式也会随之每年有不一样的变化。使用客户端版本号控制是首选考虑策略。一、前言笔者曾负责vivo应用商店服务器开发，有幸见证应用商店从百万日活到几千万日活的发展历程。应用商店客户端经历了大大小小上百个版本迭代后，服务端也在架构上完成了单体到服务集群...

不知名网友 2021-11-29 10:50 评论0 收藏0