1

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

MortenMoulder
  • 5,021
  • 6
  • 44
  • 89
  • 2
    As far as I know, this can not be done easily using just CSS. It could be done with javascript, though. –  Nov 29 '15 at 20:19
  • @jBot Anything that can do it, would do me fine. – MortenMoulder Nov 29 '15 at 20:21
  • Just out of interest, why would you want to force 1 pixel if it scales up to 2 for high res instances? – ScottMcGready Nov 29 '15 at 20:22
  • 2
    Check this: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers –  Nov 29 '15 at 20:23
  • jBot: I will check that out! I will hear and wait for a CSS reply, if that is possible as well. Scott: Irrelevant ;) – MortenMoulder Nov 29 '15 at 20:25
  • 3
    dont think thats even possible, if browser is zoomed, all elements will follow. – Lucky Chingi Nov 29 '15 at 22:19
  • @LuckyChingi I do not care about page zoom. Page zoom should do as it always have done. I just want to make 1px be 1 actual pixel. – MortenMoulder Nov 29 '15 at 22:20
  • 1
    The browser APIs available are basically designed to make what you're trying to do impossible. The whole point of having "virtual" pixels is to free you from having to do this sort of computation. – Pointy Nov 29 '15 at 22:20
  • 2
    Voting to reopen because the other question is only about JS, but this one is only tagged with CSS. – Oriol Nov 29 '15 at 23:11
  • @Oriol I appreciate that. I created another question, since I wanted any solution using either CSS or Javascript. Also because this was marked duplicate wrong. – MortenMoulder Nov 29 '15 at 23:16
  • Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/96505/discussion-on-question-by-snorlax-1-pixel-is-not-1-pixel-how-do-i-solve-that). – elixenide Nov 30 '15 at 01:12

2 Answers2

6

What I am using this for is completely irrelevant. Why do you guys care SO MUCH about what my use case is? It's my question and you guys should not care about what I am going to use it for

Here comes my question: In my example, how do I make that 1px border be actually 1px no matter which configuration the user is running?

Here is the straight answer to your straight question: You cannot (at all).

zerkms
  • 230,357
  • 57
  • 408
  • 498
  • 1
    How is this an answer? – MortenMoulder Nov 29 '15 at 23:45
  • 4
    You asked how you can do that. I answered that you cannot do that. That's how it's the answer. – zerkms Nov 29 '15 at 23:46
  • Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/96504/discussion-on-answer-by-zerkms-1-pixel-is-not-1-pixel-how-do-i-solve-that). – elixenide Nov 30 '15 at 01:10
0

I would start with this:

meta name="viewport" width="device-width"

, and maybe use parameter: user-scalable=no

CoderPi
  • 11,946
  • 4
  • 28
  • 58
Foo
  • 1