THIS IS A CSS RELATED QUESTION. I want to use Javascript only if I have to.
How do I draw a div, which has a 1 pixel border no matter which device you view it on?
If your OS has scaling enabled (which most users have, if they have a high resolution monitor), you will notice 1 pixel is no longer 1 pixel. If you have 200% scaling enabled, border: 1px solid black;
will draw a 2 pixel wide border. How can you confirm this? Add this property and value in your CSS: transform: scale(0.5);
. What does that do? It basically scales everything down 50% of its original size.
Now, how do I make sure that when my CSS values says 1px
, it will actually be 1 pixel?
Here is my example: http://jsfiddle.net/o6x9pg6e/1/
#container {
width: 400px;
height: 400px;
border: 1px solid black;
/*transform: scale(0.5);*/
}
Thank you