我在移動端上遇到的那些疑難雜癥

warmcheng 發(fā)布于2019-08-23 18:01 / 2642人閱讀

摘要：工作一年多了，相信在座的各位前端也都跟我一樣，對在手機(jī)上，特別是上出現(xiàn)的各種兼容性感到非常頭疼。這篇文章僅作為一份記錄供大家參考。我們可以在這個代碼的基礎(chǔ)上加上媒體查詢來完善它

工作一年多了，相信在座的各位前端也都跟我一樣，對在手機(jī)上，特別是iphone上出現(xiàn)的各種兼容性感到非常頭疼。這篇文章僅作為一份記錄供大家參考。

如何畫出 1px 的線？

首先問大家一個問題，如何在iphone上畫出1px的線？
萌新可能就覺得，這不是很簡單嗎，看我一把梭：

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

當(dāng)然，如果沒有意外的話，設(shè)計走查的時候就會過來跟你說，你這線太粗了，跟設(shè)計稿上的不一致！

由于每部不同型號的手機(jī)的DPR都不盡相同，所以同樣是1px在一些手機(jī)上很細(xì)，在一些手機(jī)上卻看起來很粗

一個簡單的解決方案

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

當(dāng)然了，如果不加以處理，在 DPR 為 1 的屏幕上這條線反而會很細(xì)。我們可以在這個代碼的基礎(chǔ)上加上媒體查詢來完善它

云服務(wù)器 GPU云服務(wù)器布局遇到的問題 php開發(fā)遇到的難點學(xué)習(xí)遺傳算法遇到的問題看apue遇到的有關(guān)問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104532.html

相關(guān)文章

那些年，前端學(xué)習(xí)之路的疑難雜癥（四）：面試中遇到的3個問題概覽

摘要：閉包能用來實現(xiàn)私有化和創(chuàng)建工廠函數(shù)等作用。關(guān)于閉包的常見面試題是這樣的寫一個函數(shù)，循環(huán)一個整數(shù)數(shù)組，延遲秒打印這個數(shù)組中每個元素的索引。文章來源：http://mp.weixin.qq.com/s/vs0... 前言在公眾號上看到了這篇文章，覺得很有用，有助于理解JS學(xué)習(xí)中的一些重點難點。決定把它整理下發(fā)布出來。該文章主要介紹了JS中的三個問題。在以后的幾篇文章里，我會詳細(xì)介紹這三...

gecko23 2019-08-20 15:08 評論0 收藏0
那些年，前端學(xué)習(xí)之路的疑難雜癥（三）：數(shù)組和Date的一些梳理

摘要：將指定的數(shù)字索引值轉(zhuǎn)換成字符串索引值變成，然后將其作為屬性名來用。返回一個由刪除元素組成的數(shù)組。該方法返回的數(shù)組元素是調(diào)用的數(shù)組的一個子集。使用的函數(shù)有四個參數(shù)初始值積累值數(shù)組元素元素索引數(shù)組本身。前言很多人在學(xué)習(xí)原生JS的過程中會遇到一些疑惑，比如在學(xué)習(xí)array時，就很容易搞不清哪些方法會改變原來數(shù)組，哪些方法不會改變原來數(shù)組？再比如很多人會使用new Date()獲取時間，卻...

xeblog 2019-08-21 11:33 評論0 收藏0
Mac聯(lián)機(jī)調(diào)試移動端頁面方法和移動端IOS遇到的兼容性問題

摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機(jī)的表現(xiàn)也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結(jié)論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。移動端IOS遇到的兼容性問題和 Mac聯(lián)機(jī)調(diào)試方法有時候遇到一些移動端「疑難雜癥」，因為移動端不方便調(diào)試，可能找不到問題點，所以經(jīng)常需要電腦端和移動端聯(lián)機(jī)調(diào)試，...

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

摘要：詳解十大常用設(shè)計模式力薦深度好文深入理解大設(shè)計模式收集各種疑難雜癥的問題集錦關(guān)于，工作和學(xué)習(xí)過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內(nèi)存管理。延遲加載 (Lazyload) 三種實現(xiàn)方式延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細(xì)介紹了三種延遲加載的實現(xiàn)方式。詳解 Javascript十大常用設(shè)計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0