公司最近換新首頁，按照設計師的要求《大家都在逛》的分割線要1個畫素。
.span-3然後效果就出來了}img
}
然後請設計師q圖的時候設計師一口咬定說，分割線的尺寸不對，但是看了一下**確實確實是width:0.0625rem;然後用chrome看了一下
然後設計mm說手機上顯示就成了2px，我看看手機上顯示效果
好像也是1px也啊，然後設計師mm一口咬定說錯了，沒辦法，美女都說錯了難道不行，直接截圖用ps量一下就不知道了。
畢竟有圖有真相嘛
orz....尼瑪真的是2px，到這裡我只想說設計mm你的眼睛裡有乙個尺子嗎？這麼準？
好吧，既然真的錯了，只好找辦法改咯。
後來各種嘗試，不管是將rem改成什麼單位都還是存在這樣的問題，
突然想到是不是viewport縮放的方式有問題，
將原因的值減小1半
，然後看了一下。果然有效！
雖然這種方式可行但是，我們公司現在的頁面都是基於1:1的，如果為了這樣的問題那整體改動比較大。
看來只能想想其他方法，我有想過用1px的平鋪，但是這樣的方式是不是太。。。
如果沒有解決方法的方法。
突然間，想到乙個有意思的做法，先上效果圖，ps：有對比了才感覺不是1px，再次佩服設計師mm的眼睛。
做法是：通過陰影來處理，至於為什麼陰影的效果不會出現兩倍的bug，還請有知道的同學告訴我，謝謝！
box-shadow:0 1px 1px -1px rgb(0,0,0) inset;偶然發現這1px問題算是乙個經典問題：好吧我們先來看看**怎麼處理這個問題的吧
var metael = doc.createelement('meta');
var scale = isretina ? 0.5:1;
metael.setattribute('name', 'viewport');
metael.setattribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if(docel.firstelementchild)
else
是通過動態新增meta的方式，判斷是否是retina螢幕來動態新增scale的值。
一般邊框或者分割線需要精確的以1px的視覺展示出來，普通的方案無法滿足要求。在高畫質方案下，所有的1px線都能完美重現視覺稿。
div
手機**的flexible設計與實現
手機端顯示1px線 stylus方法
假設有個hello.vue頁面，我用的是stylus編寫css 假如這是個框 如果想在邊框下新增一條 1px 的線，通常在css裡新增屬性和值 border bottom 1px solid rgba 7,17,27,0.1 就能實現。在pc端瀏覽這 1px 是真的 1px，但是在手機端瀏覽的話它就...
webApp爬坑之路（1）
這句的意思是將頁面鎖定到1.0的比例，且不允許使用者強制縮放。經測試，在我的android4.x的手機中，系統自帶的瀏覽器解析成功，將手機畫素值轉化成了物理畫素值 就是你的手機螢幕實際大小，不是你的解析度大小！但是在uc中不成功，原因未明。這個我沒有水果機，沒法測試，大概是真的吧？這個基本問題解決了...
1px問題 詳解
當你給乙個div這樣的css樣式後 邊框寬度為1px border height 50px width 50px margin 0 auto background pink margin top 20px border 1px solid red 在手機發現 哎，怎麼有點粗 這就是經典的1px問題，...