-2

i have a WordPress website with this media query

@media screen and (min-width: **312px**) { }

now there are two terms

1: window size for ( 320x533) = window size 320x533 / view port 304x420

2: view port size for ( 320x533) = window size 336x646 / view port 320x533

what is windows size and view size

abdo refky
  • 145
  • 1
  • 11
  • @Paulie_D added screen shot from my phone. – abdo refky Sep 01 '16 at 15:45
  • @Paulie_D do you mean that this tiny scroll bar is 8px which is going to make every 320px match 312 ??? – abdo refky Sep 01 '16 at 15:52
  • 5
    I'm not sure I understand your issue. Your media query will match any screen that has a width of 312 pixels or more. Obviously 320 pixels is more than 312, so it matches. – jcaron Sep 01 '16 at 16:17
  • It's hard to understand because you provided a lot of screenshots but nobody knows what we're looking for. What styles aren't being applied? The text color? The spacing? the font? what exactly should I even be looking for – leigero Sep 01 '16 at 18:33
  • @leigero you may be correct but i am talking about resolution , any way why you give me -1 . :( – abdo refky Sep 01 '16 at 18:42
  • Changing the whole question means that comments and answers which were meant for the original question make no sense whatsoever. – jcaron Sep 01 '16 at 21:25
  • Also note that your new question does not make much sense. And that your two cases are for a simulator inside a window. An actual phone has no such concept. – jcaron Sep 01 '16 at 21:27
  • @jcaron acutal phone does, you just don't know it , and that's why there is a website like this http://viewportsizes.com/mine/.. test your phone . – abdo refky Sep 02 '16 at 00:00
  • i have made some research, the view port is my resolution - android top bars. like android bar it self + the chrome address bar when present . – abdo refky Sep 02 '16 at 00:06
  • @jcaron sorry for changing the question, i am just new here and trying to adapt and find the best way to communicate, i hope you accept my apology . – abdo refky Sep 02 '16 at 00:07

1 Answers1

2

What you should care about in web design is the viewport. The viewport is the visible area inside the browser window which renders websites. Often the viewport can be slightly obstructed (and therefore is smaller) by a scroll bar.

A viewport of 320px width with a scroll bar may actually only end up being 303px after the scrollbar has been considered.

leigero
  • 3,233
  • 12
  • 42
  • 63
  • why it doesn't match on windows setting and match on viewport setting ( they both 320 ) – abdo refky Sep 01 '16 at 17:01
  • @abdorefky I don't know what tool you're using that's showing you the "window" size but it looks like a useless piece of information for your problem. The window is just the size of the browser window within your monitor. This shouldn't matter at all when dealing with a web UI. This will include your back and forward buttons, the URL bar etc. – leigero Sep 01 '16 at 19:24