The company I work for wants me to develop their mobile website, I run into a few bugs, though. On my phone screen (Windows Phone (8.1), but also Android devices) the font looks much bigger than supposed to.
The design is meant to look
I have added a meta viewport, but it did not change the font-size accordingly. Who can help me out on how to tackle this problem? Is there a common way to solve this.
This issue usually occurs if you are using a fixed font size (px) instead of dynamic font size (em) you should look into converting the base font (default font size) to a pt then refer to it using ems
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.
On my GNU/Linux box running KDE, I've set the DPI value of X11 by using the command
xrandr --fbmm 332x207
to 129x129 (as reported by xdpyinfo). Google Chrome 46, contrary to Firefox 42, unpleasantly scales up font sizes given in px with e.g.
<p style="font-size: 9px;">...</p>
I can understand the reasons for doing that – far too much badly designed web pages use font sizes in px where they actually should use em or percentages to be ready for today's multitude of different browsers and screen resolutions. However, I absolutely need correct px values for generating a font waterfall to test a font's rendering at different sizes.
What can I do to fix this?
To answer my own question: the solution is to use Chrome's --force-device-scale-factor option.
google-chrome-stable --force-device-scale-factor=1
Since updating my PC to Windows 8.1, I have been experiencing an issue with font size on several websites that I have designed when displayed on Chrome.
Nothing has changed with the design of the sites.
My navigation is breaking because the text is now too long for the menu bar. Having done a few searches, I found an answer on the superuser forum relating to HiDPI.
https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-sites-on-google-chrome
The answers posted to this question relate to solving the problem on users' local machines. I'm unsure if this occurs on all machines running Windows 8.1 viewing in Chrome. If the problem is a bug, how do I resolve it?
Here is a JSFiddle which is still showing a broken display on my screen.
no code to accompany thisJSFiddle
(Please remember that this may display correctly if you do not experience the bug. If the bug exists, the last menu item will appear below the first)
Should I decrease the size of my menu fonts, and affect the design of the site, to guarantee the menu functioning correctly?
I need a fix for everyone experiencing this problem, not just me.
Does anyone know of a fix?
Your best option would be to make sure that the viewport is set to the default of 0 and that the core font-size is set for all elements.
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalableproperties control how users are allowed to zoom the page in or out.
Viewport MDN
Font
* {
font-size: 16px;
}
This will set the font-size to 16px across all of the elements and will override whatever the user's browser default font-size is.
Both of these used together should help in some way to making sure that all browsers and device types render your page as expected.
You can use a mediaquery that detects pixel density and change the font-size for this dpi, with this, users that hasn't the bug were not affected.
I'm working on a web page that will run in IE7+ and support English and Japanese language, and I have a little problem with the font size.
On my development machine I'm using IE 9 and I also have 2 other test machines with IE8.The webpage has the X-UA-Compatible set to IE=7.
I have to allow in a span element , that has a fixed width and height, only 12 Kanji characters.
And I've thought to set the overflow of the span to hidden, and set the font size, by trial and error, so that the 12 Kanji characters will fit in the span on 2 rows.
I change the language to Japan[ja-JP] form internet options, and on my dev machine it looks how i what it, and the same goes for one of my testing machines, but for the other test machine the font size is a little bigger. The TextSize and Encoding are the same in all browsers.
I've tried setting the font size in px, em and pt, but the difference in the visual size of the font is still there.
Any thoughts on what might be the cause of this?
You cannot do this, because you cannot know what fonts will be installed on the end-users pc. Of course you could make a good guess (if you're specifically targeting IE7, chances are there are fonts that are available anyway).
But even then, it could depend on dpi settings of the user. Also, decent browser allow you to adapt font sizes without zooming the screen. So you will have to find a size that works in 95% of the cases, and leave some margin.
If you really need it pixel-perfect, you need an image instead of text (though I would still advise against it). Just embrace the fact that you cannot 100% say what a page will look like on the client.
If it is a browser based problem, then it can be fixed by detecting which browser/version it is, then add a CSS script (use Javascript to do this) depending on which browser it is, with each CSS script containing a different value for the font-size etc.
(BTW I can't help you apart from that, you will need to do further research elsewhere)
You should use an image instead of text. You can generate it on the fly using server's fonts.
I'm creating an HTML/CSS site and I have the font size adjusted the way I want it when I look at the site on Firefox in Windows (which is what I'm developing on). But when I look at the site in OS X (either Safari or FF), the font size is too big. Not massively bigger, but bigger than my client wants. But if I reduce the font any more, it's going to be too small for Windows machines.
I'm specifying all font sizes in ems in my CSS doc.
I realize that different browsers and platforms render things differently, and there's no way to control exactly how the page will look. But this seems like a pretty big issue and I'm wondering if there is some simple solution that I should know about. And if not, what is the complicated solution?
Thanks in advance.
Use pixel values instead of ems.