我在移动端上遇到的那些疑难杂症

warmcheng 发布于2019-08-23 18:01 / 2631人阅读

摘要：工作一年多了，相信在座的各位前端也都跟我一样，对在手机上，特别是上出现的各种兼容性感到非常头疼。这篇文章仅作为一份记录供大家参考。我们可以在这个代码的基础上加上媒体查询来完善它

工作一年多了，相信在座的各位前端也都跟我一样，对在手机上，特别是iphone上出现的各种兼容性感到非常头疼。这篇文章仅作为一份记录供大家参考。

如何画出 1px 的线？

首先问大家一个问题，如何在iphone上画出1px的线？
萌新可能就觉得，这不是很简单吗，看我一把梭：

.line {
    border-top: 1px solid #000
}

当然，如果没有意外的话，设计走查的时候就会过来跟你说，你这线太粗了，跟设计稿上的不一致！

由于每部不同型号的手机的DPR都不尽相同，所以同样是1px在一些手机上很细，在一些手机上却看起来很粗

一个简单的解决方案

.line {
    position: relative;
    &::after {
        position: absolute;
        bottom: 0;
        content: "";
        width: 100%;
        border-top: 1px solid #000;
        transform: scaleY(.5)
    }
}

当然了，如果不加以处理，在 DPR 为 1 的屏幕上这条线反而会很细。我们可以在这个代码的基础上加上媒体查询来完善它

云服务器 GPU云服务器布局遇到的问题 php开发遇到的难点学习遗传算法遇到的问题看apue遇到的有关问题

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

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

那些年，前端学习之路的疑难杂症（四）：面试中遇到的3个问题概览

摘要：闭包能用来实现私有化和创建工厂函数等作用。关于闭包的常见面试题是这样的写一个函数，循环一个整数数组，延迟秒打印这个数组中每个元素的索引。文章来源：http://mp.weixin.qq.com/s/vs0... 前言在公众号上看到了这篇文章，觉得很有用，有助于理解JS学习中的一些重点难点。决定把它整理下发布出来。该文章主要介绍了JS中的三个问题。在以后的几篇文章里，我会详细介绍这三...

gecko23 2019-08-20 15:08 评论0 收藏0
那些年，前端学习之路的疑难杂症（三）：数组和Date的一些梳理

摘要：将指定的数字索引值转换成字符串索引值变成，然后将其作为属性名来用。返回一个由删除元素组成的数组。该方法返回的数组元素是调用的数组的一个子集。使用的函数有四个参数初始值积累值数组元素元素索引数组本身。前言很多人在学习原生JS的过程中会遇到一些疑惑，比如在学习array时，就很容易搞不清哪些方法会改变原来数组，哪些方法不会改变原来数组？再比如很多人会使用new Date()获取时间，却...

xeblog 2019-08-21 11:33 评论0 收藏0
Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

CoreDump 2019-08-23 13:46 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0