Rems doesn't work on mobile devices - html

I've got a problem with responsive design on mobile devices, please take a look at the code and the pictures. The difference between these two are the font-size of the html root element, I set one with percentage and the other one with px, but the one with percentage doesn't work in the right way while the one with px works just fine. And the numbers in the pictures indicates the width of the red div. According to the first part of my CSS code, the width of the div should be 320px in the first picture, but it is 450 and it will not change unless I set the font-size to a percentage larger than 52.1% or something, I don't remember the exact number, why is that? why the rems do not scale in the right way on mobile devices when setting font-size of root element by percentages? Please help.
HTML
<!DOCTYPE>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script src = "main.js"></script>
<head>
<body>
<div id="div">Hello</div>
<div id="info"></div>
</body>
</html>
First Css
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:40%;}
body{background:blue;}
}
Second CSS
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:6px;}
body{background:blue;}
}
The result on my iphone for the first part of my code
The result on my iphone for the second part of my code

html{font-size:16px;}
body{font-size:62.5%;}
You need to ask yourself 62.5% of what? The default browser font size is html 16px as far as I understand and "The rem unit is relative to the root—or the html—element."
https://snook.ca/archives/html_and_css/font-size-with-rem
In my responsive.scss I used some advice I found recently come to think of it, sorry I don't have the link but the comment in the code is explanatory:
#media only screen and (max-width:320px)
{
/* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */
html.touch.webkit,
html.touch.webkit body
{
font-size:22px;
.button
{
font-size:12.8px;
}
}
I hope this helps.

Related

HTML/CSS - Adjust font-size when going between desktop and mobile

I have this simple html file and I am trying to understand why my font size doesn't scale down when I move to mobile view. I though font-size:7em would adjust when moving from desktop to mobile.
I know this is super silly, but I can't understand. Do I need to use a #media query?
`
body {
background: black;
font-family: "Big Caslon";
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
}
section {
color: white;
padding: 1em;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.title {
font-size:7em;
margin:10px;
}
<html>
<head>
<title>ShopDoran</title>
<link rel="icon" href="">
<link rel="stylesheet" type="text/css" href="doran.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<section>
<div class="title"> D O R A N </div>
<p style="font-size:2em; margin:10px;">coming soon </p>
</section>
</html>
`
First up you need to make sure you understand the different values css offer us so you can get a better idea of when to use each one.
The correct way to solve this would be for you to set up a #media query in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller.
I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works, as for rem it is always based on the root font size so it's more predictable,
#media screen and (max-width: 600px) {
.title {
font-size: 2rem;
}
A more modern approach and a bit easier but sometimes chaotic would be to approach the font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: and keeping everything under control, you would end with something like this:
.title{font-size: clamp(2rem, 5vw+1rem, 7rem);}
hi #giaggi do use the unit '''font-size:7vw''' for the font size it should fix the issue
I think you should check the CSS Unit as #Burham B. Soliman mentioned, But I will draw a guideline on how you can make it:
1- Add Font size into your HTML body like this:
html{
font-size:16px;
}
2- Size the element font like this:
title{
font-size: 3rem;
}
3- Set A Media Query for desire viewport size (for example 600px):
#media only screen and (max-width: 600px) {
html{
font-size: 10px;
}
}
There are also other ways that you can handle this. It is just an example.

font-size difference between chrome and firefox using rem

I work on a web project with Bootstrap and I have some trouble with font-size.
Try to run this HTML snippet in chrome and then in firefox with an mobile view like iPhone 7:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
html {
font-size: 40px;
font-size-adjust: none;
}
h1 {
font-size: 2rem;
}
</style>
</head>
<body>
<div>
<h1>
test
</h1>
</div>
<button type="button" class="btn btn-primary">Send</button>
</body>
</html>
You will see that in the firefox mobile view the font size is much larger than under chrome. However I initialize well the font size of <html> to a pixel value (here 40px) and then I only use rem has font size values (bootstrap also use rem values for the font size).
Why is the rendering so different?
Edit
This is pretty annoying.
On Firefox, 40px = 40 desktop-sized pixels, does not respect your emulated device.
Not sure what Chrome does, but in a 667px window set to iPhone 6(1920px), 40px = ~17px.
Responsive designs can mitigate these issues.
If responsive designs are a no-go, set font size based on vh, instead of px.
html {
font-size: 10vh;
font-size-adjust: none;
}
Old answer
On my machine, the snippet is the same size on both browsers in mobile mode.
Have you altered your zoom factor? This will change the size of rem/em.
It's possible that your OS' DPI settings could change this, too.
For consistent sizing, use responsive designs, such as flex boxes and the % css unit.

CSS3 - Media Queries Not Working (Google Chrome)

I have been trying to change the background color of my webpage if the screen size is lesser than 400px. However, the media queries do not seem to work at all. I have this meta tag in place;
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
The following is the media query I'm trying to work.
#media screen and (max-width: 400px) {
body
{
background-color: red;
}
}
I have tried using "#media only screen" too. It still doesn't seem to affect the program in any way.
This following is a minimal, complete and verifiable example
<html>
<head>
<!-- Responsive Meta Tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
{{'Hello'}}
</body>
<style type="text/css">
#media screen and (max-width: 400px) {
body
{
background-color: red;
}
}
</style>
Thanks in advance
The #media query is valid and works perfectly.
If it doesn't work in your application, it means you have a stronger CSS selector overriding the selector used in the #media query. Like, for example:
body {
background-color: white !important;
}
#media screen and (max-width: 400px) {
body {
background-color: red;
}
}
#media query still works, but !important rule has higher CSS specificity and therefore applies to the element.
Very important note: #media queries do not increase specificity. They simply tell the browser to apply the rule selectively based on the given condition. But, when the condition is true, the code inside it is treated as it if wouldn't have been wrapped in the condition. So it doesn't have increased specificity.
Note Another common reason for #media queries "not applying" is when they're tested in browsers with a zoom level set at another value than 100%.
To reset the zoom level of your browser use Ctrl + 0
To see where the currently applying value for any CSS property on any element in your page comes from (what selector, what stylesheet, what line number), all you need to do is to use a browser developer console (typically opened by selecting "Inspect Element" (or similar) from the context menu, if used on the element).

html with font-size of 62.5% and em calculations

I'm a little confused and hope someone could explain this behaviour!?
I have the following code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html{
font-size: 62.5%; // set the base font-size to 10px
}
body{
background-color: red;
}
#media only screen and ( max-width: 100em ) /* 1000px?? */ {
body{
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
I think the background-color of the body should switch from red to green if the viewport is smaller than 1001px. But that doesn't work. The color is changing at 1600px. So it looks like font-size: 62.5% doesn't work!? The question is: why?
From the CSS Media Queries Spec
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
Try setting your font-size in the body:
body { font-size: 62.5%; }
I have a hunch it ignoring what you set in the html tag.
I agree with beautifulcoder.
I don't understand why you would do a percentage when you are trying to get an actual pixel height. I have never learned to control font size from the html tag either. It is always the body tag which is used. W3C schools will tell you the same thing.
body {font-size:10px;}

How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

Question
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
Markup/CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
Combine a media query with zoom.
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Try adding maximum-scale to your meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments
I use Serban Ghita's php Mobile Detection method:
https://github.com/serbanghita/Mobile-Detect
...then this php in the head tag:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
Works great.