I have to work on a project that needs to be responsive. It's the first time I'm doing this and I'm stuck with a (possibly stupid) question.
Let's say I have this very simple page :
<!DOCTYPE html>
<html>
<head>
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
As expected, text font-size is 1em (i.e. 18px in this particular case) on all devices. And, still ok, it looks bigger on a larger device (I'm comparing with an Android phone, an iPhone and an Android tablet) : it looks the same on both phones, bigger on the tablet. So far so good.
But if I add the <meta name="viewport"> line in my code, like this :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
Now the text looks the same size on all devices, which it shouldn't, to my understanding.
So, first question is: am I trying to do the right thing or not?
And if I am: how can I get the behaviour I'm looking for?
Thanks!
From Google's PageSpeed Insights article on cross-device font-size legibility:
Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices.
I think the scaling you're noticing on some devices may be a product of the browser's attempt to make pages designed exclusively for large-screen, desktop viewing more accessible on mobile devices. When you add the properly configured viewport meta tag, the browser deems that this website is already designed for to accommodate different screen sizes and that it doesn't need to take the extra step to scale text for legibility.
First and foremost, please do continue to properly configure your viewport, carefully considering the increasingly common advice that you should avoid minimum-scale, maximum-scale, and user-scalable as these directives can limit or disable the user's ability to zoom in and out on the content of your website, which many rely on as an accessibility tool.
If you simply want more control over how your font size changes between screen sizes and pixel densities, CSS media queries based on the width and/or height of the viewport are probably going to be your best bet. For example:
#media all {
/* sets the base font size for all user agents that support media queries */
html {
font-size: 18px;
}
}
#media screen and (min-width: 480px) {
/* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
html {
font-size: 24px;
}
}
If you're worried about the proportional aesthetic of text size across devices (e.g. does the header text occupy too much of the viewport on smartphones), you might try using viewport units (specifically vmin) to force the text to scale proportionally with the size of the viewport. Be warned, though, that not all browsers support viewport units consistently. Also, please be mindful of your users' legibility needs, and use this approach sparingly, as text is designed to flow and scale fluidly for a reason, and forcing a block of text to fit within the viewport like a billboard can hinder the readability of your text for users of varying devices and/or eyeballs.
try to set font-size: 2.5vw; %)
for additional look https://css-tricks.com/viewport-sized-typography/
PS: recommend only with css media for mobile )
Related
Given this markup:
ul {
width: 50vw;
}
<body>
<h1>the issue only happens when this header is quite long</h1>
<ul>
<li>it seems</li>
<li>that there need to</li>
<li>be quite a few</li>
<li>in this list</li>
<li>as well</li>
</ul>
<ul>
<li>
here is some more stuff, which also needs to be quite long for the issue
to occur
</li>
</ul>
</body>
When I view the page in chrome devtools with the device set to "iPhone SE", it looks like this:
but when I remove the "width: 50vw;" from the style tag, the fonts get bigger:
I wouldn't expect the width of the div to affect the font size at all. Why is this happening?
From Google responsive web design guide:
To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.
In summary, it's just because how mobile browsers with small screens render web pages.
You can fix this issue by using viewport meta tag to make font-size consistent between different screen sizes.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
I also didn't see any reason to have this response. I ran the code you have, both as a codepen and just on my machine and the font remained a consistent size. Now, that's just for a regular webpage. I wasn't using the iPhone emulator.
My guess, then, is that changing the font size is a default quality with the iPhone you're testing for. That would make sense: make the font smaller on smaller screens.
I'd suggest trying a couple of different phone emulators on Chrome and I suspect you won't always have this issue. If this is for a specific project you're creating, making a media query to prevent the font getting smaller would be what I would do.
Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
I have this simple HTML generated from React
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>
When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the
This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?
What you're looking for is the #media selector. You read more about it here.
At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add
#media only screen and (max-width: ##px) {
}
Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.
On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.
Say for instance in your primary post you had
.desktop {
font-size: 30px;
}
For phone, you'd put
#media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}
I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution here, simply adding meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.
In my app I use Bootstrap and I set 2rem to my h2 element and 1.7rem to my h3 tag. Even if I adjust the browser width in my desktop (to the size of a mobile) the h1 is bigger than h3 which is what I want. But if I use the developer tools to switch to a mobile device view or view the site from my phone the h1 becomes smaller than the h3! What might be happening in here? It happened in multiple sites I created.
Example fiddle (Could not replicate the issue in the fiddle. But it's the code) : https://jsfiddle.net/gor87kg6/1/
The live site which have the issue : http://jayatours.lk/
Following the Bootstrap mobile first approach I noticed your website was not utilising the viewport meta.
Try adding the following to the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Background Information:
Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Viewport Information:
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.)
I believe this may be the cause of your issue as the use of rem seems to be correctly implemented. It might be more likely down to the dpi/ screen resolution of the mobile/ tablet device itself.
rem is a unit relative to the font size of the base (html) tag. The default in browsers is usually 16px if you haven't explicitly declared it. Perhaps the mobile browser has a smaller default?
Try setting the base font size before using rem units:
html { font-size: 16px; }
I don't see any issue. If you still see the issue then there could be 2 ways to resolve this:
1) See that the h1 font-size is not being set again in the media query
2) Check the base font applied to the html & whether it is being reset in the media query
I am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">