iOS Simulator

HTML & CSS
1

on MacbookPro i use iOS Simulator to test a responsive website menu which uses CSS media queries
the 900px horizontal menu has 7 buttons and on iPad the CSS pixel resolution is 1024px x 768px so…
in portrait mode (786px) it goes responsive and shows buttons on 2 different lines, which is perfect!
however in landscape mode (1024px) it should show all 7 buttons on one single line but still breaks onto 2 lines
(screenshot attached)
i dont understand this behaviour, if the width is 1024px why is it acting as if it only has 800px?
e.g. on my android tablet in landscape mode the menu shows on one single line, which is perfect!
(screenshot attached)

is this because the simulated Safari zooms into web pages automatically?
or
do i need to configure iOS Simulator to better simulate a real device?
[URL=“http://sinfronteras.edu.mx/p7/fine4.htm”]
http://sinfronteras.edu.mx/p7/fine4.htm

2

HI,

Try changing your viewport meta tag to this and see what happens.


<meta id="p7PM3" name="viewport" content="width=device-width, initial-scale=1.0">

You missed out the initial-scale which is the important part. You also had set user-scalable to no which is not a good thing especially on a small device as users need to be in control of what they see and still be able to pinch and zoom. You also had the wrong syntax as it should have been comma separated.

3
Off Topic:

Off topic, because it doesn’t seem to matter, but it looks wrong to have an id on a meta element … although the validator doesn’t object. If it’s not invalid, does it have any use?

4

that fixed it Paul, thanks a million!

about the id on the meta its done by the experts over at Project Seven
i was wondering about it myself to be honest, how or why is a CSS id applied to a meta tag?

5

by the way, about user-scalable, i don’t see the point in letting mobile users zoom and pinch if the pages are already mobile optimized then there seems to be no reason apart from them keeping their bad habits, what do you think?

6

I can’t read my mobile unless I zoom even when mobile optimised (I’m not as young as I was and eyesight is the first thing to go). I can’t rely on you knowing how big my text size needs to be before I can read it comfortably :slight_smile:

I can see that some ‘apps’ or games may have a need for disabling zoom on occasions but generally on the web you just want to let the user have as much control as they need. Zooming is the one thing that mobile users know how to do and they expect it to just work so it’s best not to spoil their expectations.

7

i agree, my eyes are going too!
desktop browsers allow us to increase text size to suit each user which i sometimes use when default was set too small and causes eye strain
i imagine mobile browsers should have this option too
our job is to set a good default size (1em = 16px ?)
the basic issue is why would we bother putting so much work into optimizing for mobile if users keep on zooming in and out all the time?
although i do agree that user freedom is best and if they can see all they need to see then, in theory, they wont need to zoom around anymore!