I am currently attempting to get a website to display some plain text with appropriate font sizes on both a desktop and mobile browser. Trying to choose a font size for both results in the text being too large on desktops and too small on mobile because of the different displays.
I have attempted using a media query to change the font size based off of the screen width.
#media screen and (max-width: 900px) {
body {
font-size: 2em;
}
}
This "works", but it comes with the caveat that resizing a browser window on a desktop will result in changing the font size if the width goes to or below 900px. I never want the font size to respond dynamically to the browser size. It should always stay the same size regardless of any window resizing that occurs. I will not consider vh and vw as solutions because of this requirement.
While searching around for solutions, I came across using dpi in media queries as an alternative. Since I assume the vast majority of mobile devices have a higher dpi than most desktop monitors, that could be a good way to change the font size on mobile.
#media screen and (min-resolution: 150dpi) {
body {
font-size: 2em;
}
}
But what if there is a monitor that does surpass this dpi? This works for the 3 devices I am testing with, but I cannot be sure that it will work in more cases.
Overall, my aim is to get something like the setup Wikipedia has. https://en.wikipedia.org/wiki/Dots_per_inch The font size does not change when resizing the browser, it displays at a readable size consistently on both mobile and desktop browsers, and I assume it will work quite nicely on a high dpi monitor as well, but I have no way of testing that.
So what is the appropriate way to get the functionality I am looking for?
After writing this question but before posting, I kept on searching for a solution and I found it. It's actually very simple, but easy to miss. I hope posting this helps others in the future. It all boils down to this line within the head of the html.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It's explained nicely here.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Average font-size for resizing screen you can get by using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
Related
Sorry for the ambiguous question, coding noob here. Essentially, I have a site where the entire container is set to 100vw, and then font-sizes also set in vw. This works so that no matter how I scale the site, on mobile or desktop, it'll display nicely.
However, I want it to display on a desktop as if it was a mobile-sized screen (basically the view you get if you do the mobile view in Chrome).
If I adjust the width of the container to be less than 100vw, that is fine, but since the fonts are still set relative to the viewport, they become too big for that width. So basically I want to find a way to tell the computer, "even though your actual device-width is this, act as if the device-width was this".
I have <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=yes"> in my html files, and have tried setting the width to various px amounts rather than device-width, but still no luck. Thanks so much for any help!
I think what you are looking for is Media Queries. Check out this article on CSS-Tricks.
Media queries allow you to select based on properties of the user's device, such as screen size. This is similar to how pseudo-classes like :hover makes a selector more specific, except you nest the styles in a #media block.
Typically, if you want your website to change appearance based on the width of the screen, this would be the easiest and most reliable way to do so. For example, you have the font size set relative to the viewport, but you don't want it to get too big. You can add a media query that sets a maximum size like this:
body {
margin: 0;
}
#content {
width: 100vw;
font-size: 100vw;
margin: auto;
overflow: hidden;
background: #ddd;
}
#media all and (min-width: 300px) {
#content {
width: 300px;
font-size: 300px;
}
}
<div id="content">
Lorem ipsum
</div>
When the screen is at least 300px wide, the latter style overrides the former because it is more specific.
Here is a fiddle so you can see it work while adjusting the window size.
Notes
Setting the meta property viewport to device-width primarily just tells mobile browsers that your website works with small screens. Without this, some browsers will essentially "zoom out" so that it renders like the screen is as large as a common monitor. This way everything will still look alright on small screens, even though everything will be really small. This is not for telling the browser to use "mobile mode". That is not a thing.
You should probably avoid setting font size to a vw unit for most text. You should stick to basic units like rem, em, or pt for fonts because users can set accessibility options in their browsers that will affect the font size. You want your users to have the font size they want. Only use vw on special text like main titles/headers, not on large bodies of text like an article.
google says "because css pixel ratio" but I can't figure out what that is, or why it exists.
Why am I adding metadata that tells the browser to render the screen at <2/3rd the screen's resolution? Images (as far as I can tell) don't get resized, so why is everything else? and why this so common?? wts is going on??
You need to understand why you are adding certain codes into your file. You said you have <meta name="viewport" content="initial-scale=1"> in your code. What initial-scale means is, upon page load, the page will be viewed at 100% zoom level. It's not about filling 1 CSS pixel to 1 hardware pixel. It's about filling 1 CSS pixel to 1 device-independent pixel.
As defined in Google's developer reference:
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Are the hardware pixels on your phone different from those on your PC monitor? Yes, they are different in terms of size (pixel density). Assuming your 21" monitor and 5" phone screens both have 1920px x 1080px screens, so obviously the pixel density is much higher on the phone's screen (and much smaller pixels) and it would not be wise to show up the webpage using the ratio of 1 CSS pixel to 1 hardware pixel since everything will be too small on the phone screen.
So what if you don't want responsive website design, but to fit the whole page into the small screen like what you see on a PC monitor? All you need to do is to remove the <meta name="viewport" content="width=device-width, initial-scale=1"> line and browsers will automatically fit the page onto the screen by default, by zooming out (i.e. initial scale will not be 1). Developers only add this line of code if the website needs to be responsive, and has the relevant CSS media queries for that.
While Billy's post did answer the question, and it does a good job of describing the general mechanism, the question did rise how to set the webpage to full screen in browsers that don't zoom out all the way by default. That is, use every pixel on a 1920×1080 screen as if it was a 1920×1080 desktop monitor.
Well, unfortunately there is no failsafe way to do that, but you can get close if you include some device specific #media queries.
html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
#media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-resolution:1.5dppx) { body {zoom:.66666667} }
#media (-webkit-min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-resolution:2dppx) { body {zoom:.5} }
#media (-webkit-min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-resolution:3dppx) { body {zoom:.33333333} }
#media (-webkit-min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-resolution:4dppx) { body {zoom:.25} }
This will (attempt to) zoom the scale of the page so that the number of CSS pixels is the same as the number of hardware pixels.
Of course if you take this approach, note that you will have to add new media queries with higher resolutions as time progresses.
And it will fail on devices that are not 1920×1080 pixels.
A better approach would be to not contemplate the hardware resolution at all, but just work with what you have. Don't use pixels, use percentages or vw and vh for measurements. 50vw, not 960px, is the horizontal centre of the screen. That way, your webpage wil display correctly on any device, no matter its characteristics. No scrolling or pinching needed!
You may find you have to differentiate between landscape and portrait modes with #media queries, but that depends on the contents of the page.
I've got a couple of problems, Using media queries I change the position and font size for mobile/tablet and desktop, the problem is, if your changing the window size the font size and a couple of social icons are taken out of place.
So mobile 320, tablet 768, desktop 960-1280+ are the sizes I've designed for.
#media only screen and (max-width: 320px) {
.footer-top ul.links li {
font-size: 0.60em;
}
ul.home-social {
width:73%;
margin-left:auto;
margin-right:auto;
}
}
This is the example of font change and social icon position, but if the window is resized by the user the icons are out of place. Any Idea's ? I just want it to flow well or is there no point?
First of all I just want to say one thing, that the sizes of phones, tablets, etc are all extremely relative. While you may have designed something for 320 and for 768 the varying sizes of all of the different phones and ALL of the different tablets is going to make it impossible to make a pixel-perfect design for each.
As far as the position of the elements and font sizes being affected by the user changing the size of the window and it being incorrect, you'll have to find a way to align them so that they work well within whatever size they are currently being viewed at. Instead of having text next to the icons and messing with trying to get both Alignment and Font-Size to work based on a lot of screen sizes, try breaking them out so that the icons and the text are on two different horizontal lines, possibly?
In my mobile app I use kind of big fonts for example:
<b style="font-size:100px; font-family:Segoe UI">text</b>
When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.
What css settings should I use to get the same size on every phone?
Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.
Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.
There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.
Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.
For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.
If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):
<meta name="viewport" content="width=device-width, initial-scale=1">
If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.
You should be using Media Queries for different device widths.
#media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}
#media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}
And so on...
I have started using REM and EM to achieve this.
I don't know whether a phone browser's default font size changes based on screen size or specific to device. So what I do is I set the HTML to a font size relative to an average of the height and the width of the device using vw and vh like so
HTML{font-size: calc((1vh+1vw)/2)}
By using REM and EM from here you get a more consistent layout and font size across the board.
This works well for mobile devices as they all tend to be the same sort of aspect ratio. I would recommend changing how you implement this for tablets and desktops as their screen ratios tend to be quite different. Of course, use media queries to have separate styles for these.
I would like to say that I just started using this method so would love to hear reasons why I totally should not be using it!
Use #media Queries and set different fonts for different resolutions
Example
#media all and (max-width: 1200px) and (min-width: 800px) {
/* Change Resolutions Here */
b {
font-size: 12px;
}
}
Good Read On Media Queries
Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass
It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.
Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.
The answers are all correct but I find the combination of viewport size related but limited to between two values ideal by using clamp() For example:
font-size: 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
This will smoothly size the text but not under 1rem (typical 16px) or over 1.25rem (typical 20px). It can be used on the size of icons or font-awesome chars or svg vectors. I use one of the many online clamp calculators to spare me the maths. For instance this one.
Following these articles:
CSS font-size: em vs. px vs. pt vs. percent
16 Pixels
For Body Copy. Anything Less Is
A Costly Mistake
I'm about to use the base size of:
body {
font-size: 100%;
}
and use this as the base paragraph font size, resulting - on desktops - in 16px, unless the user changes his browser or system settings.
The site's layout is responsive and I'm concerned about how it's going to look on mobile devices too - including small smartphones and high-DPI displays.
If I just specify 100%, what will this result with on mobile devices? Can I expect the browsers to choose the optimal font size for the given screen size and DPI?
From my experience, most modern smartphone browsers are pretty good at setting a suitable font size if you set it to 100% - but you can never be sure.
If it was me, I would add that extra layer of protection by manually setting a font size YOU like for smaller screen resolutions.
#media (max-width: 767px) {
body {
font-size:18px;
}
}
Of coarse, you'll have to test it out on a mobile device to get that perfect font size you're looking for.
Adam.