I was testing a scrolling element and found some strange differences between mobile (iOS) and desktop browsers. If you load this test website in an iPhone and desktop and inspect the content of the scrolling container I noticed that on iOS the calculated content height of the <p> elements is greater than on desktop.
This seems to be a font rendering related thing as the css of the example site is very minimal. I checked all the relevant css props I could think of (like font-size, line-height, etc) but they all have the same value on both sides.
In the images below <p> elements have a total height of 40px (20px margin + 20px content) on iOS and 38px (20px margin + 18px content) on desktop. This makes the total scrollHeight of the container element to be 4000px on iOS and 3800px on desktop.
I couldn't find any bug related in webkit bug tracker and I don't have at the moment an android device to test or any kind of table, so I could only test on my iPhone vs desktop. This behaviour can be reproduced in any browser.
Things that I tried
Other fonts and still could find differences of more than one pixel
Embed a google font to test if it had to do with native fonts on mobile vs desktop
Instead of 100 paragraphs used only one paragraph but with 100 lines of text
Set -webkit-text-size-adjust prop to none
Used some css resets but the difference persisted
Does anybody have a hint on this?
Desktop Browser
Mobile Browser
I'm quite new to webdev, but I would try using a specific line height for the paragraphs
Related
I ran into a problem when trying to increase the font on the mobile version of the site. The font size in the CSS is indicated in px, but visually, by the number of words that fit in a line on the same page, when viewed in the browser chrome and firefox, the desktop version of windows and android differ, on android the font is actually smaller - i.e. more words will fit in a line.
What is the reason? And how to fix it?
I tried changing px to pt, same result.
The problem was with the font, I replaced it with another and managed to achieve almost complete identity.
I am trying to change an website from fixed layout to a responsive layout but I am having problems setting up the html width. As you can see in the image below the width of html tag is 980px even if the page is empty, no css or js, just the html tags and doctype (the head and body are added automatically by browser):
For testing I am using the Google Chrome Dev Emulator set up as Apple Iphone, I also tested on a phone and still the page looks too big for the screen.
Do you have any idea what to change to make my html tag width vanish?
It's your Dev Emulator. According to the Safari Web Content Guide by Apple (under "Examples of Viewports on iOS"), the default size of the viewport of the iPhone is 980px. The Dev Emulator is then...emulating that page size for you. If you want to make it go away, just turn off the emulator or adjust any settings it may have.
I was making a code formatter for my website and I encountered some strange behavior between desktop and mobile browsers. On desktop the code block looks like this:
and on my iphone the line numbers are, for whatever reason, in a smaller font size:
I haven't done anything to edit any sort of font sizes anywhere on my website. It's all default sizes. If I manually set the font size, say to 12px, it is still lined up on my desktop browser, and still smaller on my mobile browser.
The code block is laid out as a table with two cells. The left cell contains a 1 column table, each row contains a number. The right cell contains a 1 column table, each row contains a line of code.
Any idea why the font is shrunk on the mobile browser?
EDIT: LINK: http://grantslatton.com/posts/blog/2013-08-16/sudoku_solver/
EDIT2: It renders correctly on windows phones and android phones.
SOLUTION: Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked :Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
I put -webkit-text-size-adjust: 100% in the body { } section of my CSS to prevent mobile safari from messing with my text size.
Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
I put the following in my CSS to prevent mobile safari from messing with my text size.
body {
-webkit-text-size-adjust: 100%;
}
I am redesigning a website to better work with mobile devices. My problem is that on the right side of the page there is an open space, even though all the specified widths are the same. Here is the page: http://uniqueantiqueskingsport.com/wp7. So far I have only tested it with the Windows Phone 7 emulator.
I don't have a WP7 to test this on, but I'm seeing the same when viewing on desktop browsers. The problem is your footer content, a lot of it is set at width: 320px, margin: x and padding: x. Those margins are adding to the box model of your content, and forcing the page to expand.
Read up on the box model at Sitepoint's awesome reference site.
For the record, IE9 on Mango automatically zooms to fit the width of your content. But using a dynamic width would be much better.
I have a web site that has had a fluid layout for years. That is the body's text size is defined and from there all other sizes are relative and are specified in terms of ems. This made the page fully scalable on IE 5.5 upwards, old FF versions etc. Nowadays it isn't really that important anymore since in modern browsers there is page zoom opposed to text zoom. Page zoom works on all browsers for me IE, FF, Opera and zooming in works on Webkit based browsers, too. But zooming out (to less than 100%) breaks the layout and I don't understand why that is.
here is an example page from the page as it stands to try this:
Why does the layout break in Safari (I used 5.0.5 to test) and Chrome when zooming out? In Chrome it works for like two steps of zooming out and then breaks. There is little use to zooming out so this is more of an academic question I guess. I'd like to understand what's happening.
Thanks.
It's might because of some default browser styles that are based on px instead of ems. For example, if you use the webkit inspector in Safari <ol class="navi_rechts"> has a user agent stylesheet that includes -webkit-padding-start: 40px. It might be worth using a CSS reset or checking for things like this on any messed up elements.
EDIT It may also be a rounding issue with some of your values. I'm not sure how many decimal places Safari will look at, but I'm guessing things like padding: 0.46154em 0em 0em 0.92308em; on h1.navi_parent_rechts might be too specific.