Got two one problem with my web site that I’ve started doing responsive. Reduced test case: http://senff.com/test
Problem one: on iPhone (only?), the main content font looks fine in portrait mode. Then when you turn to landscape mode, the font becomes way too large. I’ve hard coded the font to be 16px because I think this is the perfect size for all devices (I’m taking out the option to zoom and scale and all that). I know there are better ways like using ems and such, but for now I’ve chosen 16px flat. Shouldn’t 16px be the same size in landscape and and portrait? Funny thing: the menu items ARE displayed in proper size. Also, in Chrome on iPhone, the font snaps to its proper size if you reload the page.
EDIT: solved by using:
html {
-webkit-text-size-adjust: none;
}
Would still like to know the nitty gritty about why this has to be done (H1 and MENU are sized properly, so why does iPhone do weird stuff with P elements), but it’s working now.
Problem two: the menu is sticky. Not upon load, but once you scroll down it becomes sticky. If you test it in any desktop browser, it works all fine — the menu “snaps” to the top as soon as it reaches it. But on mobile devices, it won’t snap when it reaches the top, but after you STOP scrolling. So you could scroll all the way down (by swiping your finger from the bottom of the screen to the top), the menu will just disappear out of view UNTIL you let go of the screen. Question: is that normal behaviour for mobile?
(Please disregard the width of the menu when you test it on desktop. I’m purely focusing on the moment when it becomes sticky.)
