移動端 1px 畫素問題以及解決辦法

2021-09-25 13:58:03 字數 2933 閱讀 3164

在移動端web開發中，ui設計稿中設定邊框為1畫素，前端在開發過程中如果出現border:1px，測試會發現在某些機型上，1px會比較粗，即是較經典的 移動端1px畫素問題。

要處理這個問題，必須先補充乙個知識點，就是裝置的 物理畫素[裝置畫素] & 邏輯畫素[css畫素]；

物理畫素：

移動裝置出廠時，不同裝置自帶的不同畫素，也稱硬體畫素；

邏輯畫素：

即css中記錄的畫素。

1、 **查詢利用裝置畫素比縮放，設定小數畫素；

優點：簡單，好理解

缺點：相容性差，目前之餘ios8+才支援，在ios7及其以下、安卓系統都是顯示0px。

ios8+下已經支援帶小數的px值，media query 對應 devicepixelratio 有個查詢值 -webkit-min-device-pixel-ratio；

1.）css可以寫成這樣：

@media screen and (-webkit-min-device-pixel-ratio: 2) 


}@media screen and (-webkit-min-device-pixel-ratio: 3) 


}
2.）js 可以寫成這樣：
2、設定 border-image 方案
.border-image-1px
border-width：指定邊框的寬度，可以設定四個值，分別為上右下左border-width: top right bottom left。

border-image：該例意為：距離上方2px（屬性值上沒有單位）裁剪邊框作為上邊框，下方2px裁剪作為下邊框。距離左右0畫素裁剪即沒有邊框，以拉伸方式展示。

3、background-image 漸變實現

.border
原理：將原本1個物理畫素的邊框大小利用線性漸變分割成幾個部分（百分比控制），實現小於1畫素效果。

linear-gradient：指定線性漸變，接受大於等於3個引數，第乙個為漸變旋轉角度，第二個開始為漸變的顏色和到哪個位置（百分比）全部變為該顏色，該例子中，第一句就是，漸變方向旋轉180度，即從上往下（預設為0度從下往上），從紅色開始漸變，到50%的位置還是紅色，再漸變為繼承父元素顏色。

4、box-shadow

利用陰影也可以實現，優點是沒有圓角問題，缺點是顏色不好控制

div
box-shadow屬性的用法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]

引數分別表示: 水平陰影位置，垂直陰影位置，模糊距離， 陰影尺寸，陰影顏色，將外部陰影改為內部陰影，後四個可選。該例中為何將陰影尺寸設定為負數？設定成-1px 是為了讓陰影尺寸稍小於div元素尺寸，這樣左右兩邊的陰影就不會暴露出來，實現只有底部一邊有陰影的效果。從而實現分割線效果（單邊邊框）。

5、viewport + rem

該方案是對上述方案的優化，整體思路就是利用viewport + rem + js 動態的修改頁面的縮放比例，實現小於1畫素的顯示。

缺點：以為縮放涉及全域性的rem單位，比較適合新專案，對於老專案可能要涉及到比較多的改動。

在頁面初始化時，在頭部引入原始預設狀態如下：

接下來的任務就是js的動態修改縮放比 以及 實現rem根元素字型大小的設定。

var viewport = document.queryselector("meta[name=viewport]")


if (window.devicepixelratio == 1)  


if (window.devicepixelratio == 2)  


if (window.devicepixelratio == 3)  


var docel = document.documentelement;


var fontsize = 10 * (docel.clientwidth / 320) + 'px';


docel.style.fontsize = fontsize;
1.) 設定height: 1px，根據**查詢結合transform縮放為相應尺寸。

div
2.) 用::after和::befor,設定border-bottom：1px solid #000,然後在縮放-webkit-transform: scaley(0.5);可以實現兩根邊線的需求

div::after
3.) 用::after設定border：1px solid #000; width:200%; height:200%,然後再縮放scaley(0.5); 優點可以實現圓角，京東就是這麼實現的，缺點是按鈕新增active比較麻煩。

.div::after
/* 2倍屏 */


@media only screen and (-webkit-min-device-pixel-ratio: 2.0) 


}/* 3倍屏 */


@media only screen and (-webkit-min-device-pixel-ratio: 3.0) 


}

移動端rem適配，h5適配，1px畫素問題

關於meta標籤的介紹meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支援。在蘋果的規範中，meta viewport 有6個屬性 暫且把conten...

移動端1px問題

在移動端頁面中設定邊框為1px時，在有的裝置中可能會發現邊框比1px要粗即1培訓1px 1px 裝置畫素比dpr 裝置畫素 css畫素 某一方向上 當dpr為2時1px實際為2px iphone6 dpr為3時1px為3px inphoex 所有看起來1px就會變粗 ios8下已經支援帶小數的px值...

移動端1px問題

在高清屏下，移動端的1px 會很粗。那麼為什麼會產生這個問題呢？主要是跟乙個東西有關，dpr devicepixelratio 裝置畫素比，它是預設縮放為100 的情況下，裝置畫素和css畫素的比值。window.devicepixelratio 物理畫素 css畫素目前主流的螢幕dpr 2 iph...