移动端开发的几点建议

时间: 2019-11-13阅读: 270标签: 建议

1. 页面适配

这一点不能算是建议,应该说是解决方案。

最近查了好多关于移动端适配的资料,把人都看懵了,收获了以下名词

css像素、物理像素、逻辑像素、设备像素比、PPI、DPI、DPR、DIP、Viewport

说实话,我一点都不想了解这些名词到底有着什么样的解释,只想知道怎么让开发的页面能适配不同的移动端设备。简单点说,我想知道怎么获取设备的真实开发尺寸(根据这几天查资料所得,这个概念叫逻辑像素)。

例如 iphone 6,它的分辨率是 750 x 1334,真实开发尺寸是 375 x 667(逻辑像素),打开 chrome 控制台,切换 device toolbar, 选择 iphone 6 设备就能看到。

苹果设备大多都能查到它的开发尺寸是多少。但安卓设备不是,没有这种条件,所以要靠其他手段了。

根据查资料所得,目前有两种方法可以获得移动设备的真实开发尺寸。

第一种方法:设备像素比
真实开发尺寸 = 分辨率 / 设备像素比

通过window.devicePixelRatio 可以获取设备像素比,例如 iphone 6 的设备像素比是 2,即 分辨率 / 2 = 真实开发尺寸,750 x 1334 / 2 = 375 x 667。移动设备的分辨率随处可查,看发行参数就知道了,然后再通过浏览器获取设备像素比,从而得知设备真实开发尺寸。

第二种方法

这种方法不需要知道设备分辨率,也不需要知道设备像素比,简单粗暴。

在页面建立一个刚好铺满全屏的 div 元素,然后获取它的宽高,这个宽高就是该设备的真实开发尺寸。

.test-div {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: red;
}
document.querySelector('test-div').clientWidth // 宽
document.querySelector('test-div').clientHeight // 高

刚好我手上有一个华为 m5 平板和华为 m5 pro 平板,大小分别为 10.1 寸和 10.8 寸,分辨率为 1920 x 1200,2560 x 1600。获取到它们的真实开发尺寸分别为 960 x 600 1024 x 640,根据分辨率和真实开发尺寸还能得知两个设备的设备像素比分别为 2 和 2.5。

为了证明推断是正确的,我拿了一个专门在 m5 pro 上使用的 app 放在 chrome 上运行(模拟该设备的开发尺寸),完美适配。

另外提一下,为手机开发的网站放在其他手机上一般都能适配,但是放在平板上很难适配,毕竟屏幕大小差太多了,反之亦然。没有网站能完美适配所有的端,当然,简单的页面还是可以的,不过得写一堆 @media screen。


2. 相对长度计量单位

css 中有很多相对长度,其中常用的有 em rem vw vh,在小程序上有 rpx。

在此,我建议你使用 vw 和 vh 作为移动端开发的相对单位,包括字体大小、元素宽高、距离等等。

理由如下:

vw vh 换算方便
1vw = 屏幕 1% 的宽度
1vh = 屏幕 1% 的高度
兼容性好

无论是在网页还是在小程序,只要支持 css 就能完美兼容。

PS:在页面上有 input 输入框的时候,不要使用 vh 作为计量单位,因为软键盘弹出时会压缩页面高度,如果用 vh 作为计量单位,会导致页面严重变形,此时用 vw 就没有这个风险了。

固定高度使用 px

像边框或者分隔线等“固定”高度的,可以使用 px。


3. 栅格化布局

如果开发的 app 只是应用在手机上,适配一般不会有什么问题,因为屏幕大小不会相差很多。但是放到平板上就会有问题,如果计量单位使用的是相对长度,各个元素相对于手机都会变大,导致不美观。

在这种情况下,我们可以使用栅格化布局。例如在手机上采取两列布局,在平板上采取三列布局。另外还要用 @media 根据分辨率来调整元素的大小、字体的大小等等。

PS:如果一个 app 要应用在手机和平板上,相对计量单位建议使用 rem,这样在手机和平板上可以设置两个不同的根元素字体大小。


    4. 尽量使用移动端专用的 UI 组件库

    PC 端的 UI 组件库在移动端上会有很多样式 BUG,如非必要,不要使用。


    5. 设备状态栏

    如果 app 在移动设备上不需要全屏展示,那么在 chrome 上模拟设备大小时要减去设备状态栏的高度。

    当然,这一般都不会有什么问题,只是为了多加一条建议。


    站长推荐

    1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

    2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

    3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

    链接: http://www.fly63.com/article/detial/6830

    给前端开发的 6 点建议

    最近接触了很多前端的小伙伴,和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。在交流中我发现了一个很有意思的现象,大家同样是入门不足三年,一部分感觉前端是一个很有前途的职业

    如何优雅地给同事提“改进性建议”

    每到年底最痛苦就是评绩效,而且公司要求评定原则要符合正态分布的趋势,也就是说总会有人背上差绩效。这真是一个很难取舍的事情,特别是在人数较少的团队,大家做的事情都知根知底,被迫下手抓人头,处理不好会带来众叛亲离的反效果

    给急着找工作的人一些建议,别在被骗了!

    现在培训机构遍地都是,每家培训机构的战略战术上的打法都不一样,你作为刚刚毕业的大学生来说,真的很难一一甄别。最后的最后,记住,薪资和能力成正比,要想拿高薪,就得提升自我业务水平!唯此一条能帮你的。

    给需要关心安全的技术人员的一些建议

    随着网络的发展,特别是移动互联网的发展,网络服务与我们个人生活联系得越来越紧密;办理金融业务,生活缴费,获取资讯等等,都从线下搬到了线上。一个新的时代必将到来或者已经到来,那就是万物互联的时代。

    成为一流软件开发者的 34 条建议

    我们列出了一张包含 34 条建议的清单,来帮助你成为一流的软件开发者,在技术行业中打造出成功的职业生涯。这些建议中,有一些是特别针对增强编程技能的

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

    文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

    小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广