I have a website which is mainly for mobile devices, but not only for them.
I already use the RWD approach. I use percentage values in css (none hard-coded px) and I even scale the font-size with JavaScript, so the result is always the same, regardless of screen size - on Android phone, iPhone, iPad... - it looks good (menu is 100% of width, it's height keeps the ratio, text is also visible).
But, when I preview that website on my PC (with the 24'' screen) it looks just like nightmare. Everything still keeps the ratio etc., but on such big screen (compared to iPhone/iPad), it just looks bad (menu button of 5x5 centimeters size...).
I would like to somehow stop expanding the sizes of elements at some point.
Note that max-width/max-height measured in pixels is not a solution. It's because some mobile devices has great px resolutions and still a very tiny screens (compared to 24''). At the same time, I can turn my monitor (24'') to render in 800x600 resolution. So px resolution says nothing about the size of screen (just to clarify it).
Image that I would use: max-width: 900px and that solves the problem with PC. But now I try to render the website on small (less then 18'') screen with resolution greater then 900px in width. And my menu has been scaled down (when I wanted it to fill the full width in the case of small screen).
Moreover, I cannot rely on CSS cm unit. They have been made with some assumption about dpi which looks ok on PC Windows 7 (for example), but on my HTC Android (for another example) 1x1cm box is nothing like 1x1cm box (and no scaling was involved).
So - how to deal with it?
I basically want i.e.: to make my button 20% of the screen's width (I will place 5 such buttons on the screen in one row, as top menu), but if the screen is bigger then 18'', I want to stop expanding it (some margin space will occur, but whatever). And it's absolutely regardless of the px resolution.
0 comments:
Post a Comment