解決移動端一像素問題的Vue指令

wing324 發布于2019-08-30 15:55 / 1689人閱讀

摘要：所以是不能用正常的方法來讓安卓設備渲染一個物理像素的線。其他的指令自動處理。

最近公司項目要解決一像素問題，自己琢磨了一陣子并且網上搜索了一堆博客，總結出最好的辦法應該是通過css的transform scale縮放1px的內容來模擬設備上1px的效果了。但是這個方法有太多局限。然后秉著css解決不了的問題就用js來解決的原則，然后結合vue的自定義指令，手擼了一個一像素vue自定義指令。打算扔到giuhub留存。順便總結一下遇到的問題。

項目地址：https://github.com/HelloWorld20/onepx

歡迎各位取用。如有錯誤的地方，也歡迎指正。

原因

眾所周知，自從iPhone 4帶來了Retina display后，移動端開始引入了一個叫設備像素比（devicePixelRatio）的東西。

另一方面，如果給一個html標簽寫一個小于1px（H5）的border；IOS可以正常渲染，但是安卓設備不渲染。所以是不能用正常的方法來讓安卓設備渲染一個1物理像素的線。

戳這里看DEMO;

當然用移動端才能看到效果：

網上的解決方案

網上搜能搜出很多解決方案，這篇文章基本匯總了網上的所有方案。然后結論是：使用css的偽元素來渲染一個1px（H5）的div，并且使用CSS3的scale來縮放dpr倍，從而渲染一個1px物理像素的線。

然而理論畢竟理論，用到項目中的時候還是遇到了很多問題

1. 如果兩個偽元素都被占用，則無法實現

網上的方案都是用CSS偽元素來實現的，而偽元素只有before和after兩個，所以要是實際開發中中占用了before、after，則無法用CSS來實現模擬一像素。

2. 必須手動設置圓角

圓角是最頭疼的問題。用CSS偽元素雖然可以做到圓角，但是CSS偽元素只能通過border-radius: inherit得到和父元素一樣值的圓角大小，縮放之后就不一樣了，且css無法計算縮放后還和父元素一樣的圓角。而且js也不能操作CSS偽元素，所以不得不手動計算dpr，然后給CSS偽元素設置圓角。

3. -webkit-device-pixel-ratio不是標準方法

CSS中判斷設備設備像素比的方法是-webkit-device-pixel-ratio，不是標準的方法，所以用起來心慌慌。而JS的window.devicePixelRatio已經全面支持，頂多也就一個undefined。完全不用擔心兼容性問題。

4. 部分標簽不能設置偽元素

type為text的input標簽就無法在標簽內插入的dom（雖然控制臺里顯示已經被插入，但是不會被渲染出來），所以偽元素也無法給其加上模擬的1像素。

更好的方案

本著CSS解決不了的問題就用JS來解決的思想。再結合Vue提供的自定義指令，可以在想要加1像素的html標簽上加上一個指令，js能通過Vue的自定義指令拿到對應的DOM，那么就一切皆有可能。

最終實現了一個Vue指令，只需要給對應的HTML標簽加上一條指令就行。其他的Vue指令自動處理。并且這個指令在我們項目中運行過一段時間，基本是可靠的。

要注意的地方

綁定的元素必須顯示聲明其position值為：relative、fixed、absolute之一，不然模擬一像素的div無法定位到位置

務必給對應的DOM清除掉border樣式

不能用于標簽等內部不能插入元素的標簽

GPU云服務器云服務器解決問題的方法云計算解決的問題短視頻問題的解決措施數據分析解決的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117309.html

vue全家桶仿某魚部分布局以及功能實現

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動。可以進行確認收貨后刪除訂單。前言每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做...

dreamGong 2019-08-23 11:01 評論0 收藏0
關于個人第一天前端面試的面試問答QA，希望能對其他找前端工作的朋友有所幫助。

摘要：兩日前，發了一篇吐槽，莫名的火了一把。關于的第一個，其實就是聲明一個常量，不允許變更。另外對象迭代這里出自，阮一峰大神寫的入門指南，對象篇。兩日前，發了一篇吐槽，莫名的火了一把。經過大家的建議與鼓勵，于是修改了簡歷，開始了重新投遞，2天后接到第一份面試邀請。此文為個人面試經歷，QA問答過程與總結，不透露面試公司及面試人員，內容真實，如果有面試過我的大佬看到博客，歡迎指出問題。循序...

Youngdze 2019-08-20 15:29 評論0 收藏0
我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

import. 2019-08-30 14:16 評論0 收藏0