最近完成了公司安排的移動web觸屏開發，期間涉及到在移動裝置上顯示線條，最開始採用pc常用的css board屬性來顯示1個畫素的線條，但是發現在移動裝置上並不美觀，參考**、京東的觸屏發現它們均是採用淺細的線條來顯示在移動裝置上。
以下紀錄了比較方便的4種繪製0.5畫素線條方式
一、採用meta viewport的方式，這個也是**觸屏採用的方式
常用的移動html viewport的設定如下
具體意思就不多提，它就是讓頁面的高寬度即為裝置的高寬畫素，而為了方便繪製www.cppcns.com0.5畫素的viewport的設定如下
這樣html的寬高就是裝置的2倍，此時依然使用css board為1畫素的話，肉眼看到頁面線條就相當於transform:scale(程式設計客棧0.5)的效果，即為0.5畫素
但是這種方式涉及到頁面整體布局規劃以及大小的製作，所以若採用這個方式還是事先確定為好
二、採用 border-image的方式
這個其實就比較簡單了，直接製作乙個0.5畫素的線條和其搭配使用的背景色的即可
boardtest
點選1點選2
三、採用background-image的方式
我這裡採用的是漸變色linear-gradient的方式，**如下
boardtest
點選1點選2
linear-gradient(bottom,red 50%,transparent 50%);的意思是從底部繪製乙個漸變色，顏色為紅色，佔比為50%，而總寬度已經設定為100%而總高度為乙個畫素background-size: 100% 1px；
這樣顯示出來就是0.5畫素的線條
四、採用transform: scale()的方式
就是將繪製出來的線條的高度進行半倍的縮放，**如下
boardtest
點選1點選2
本文標題: web前端繪製0.5畫素的幾種方法
本文位址:
iOS繪製1畫素的線
有時候頁面上需要繪製1畫素的分隔線，可以通過新增 view 的方式，也可以通過 uigraphicsgetcurrentcontext 的方式實現。但是通過uigraphicsgetcurrentcontext實現的時候需要注意畫素的問題。在繪製1畫素線之前，我們先來看一下繪製高度為50的線是什麼樣...
WEB前端開發 WAP頁面製作需要注意的幾點
1.遵循 html 頁面的編寫規則 2.新建的時候注意文件型別 xhtml mobile10.dtd 3.特殊的meta標籤 網頁手機wap 2.0網頁的head裡加入下面這條元標籤，在手機瀏覽器中頁面將以原始大小顯示，並不允許縮放。width viewport的寬度 height viewport...
WPF 繪製對齊畫素的清晰顯示的線條
原文 wpf 繪製對齊畫素的清晰顯示的線條 此前有小夥伴詢問我為何他 1 畫素的線條顯示發虛，然後我告訴他是 畫素對齊 的問題，然而他設定了各種對齊畫素的屬性依舊沒有作用。於是我對此進行了一系列試驗，對 wpf 畫素對齊的各種方法進行了一次總結。此後在 stackoverflow 中，我回答了 gr...