I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.
Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.
I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome:
http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox is correctly showing the font-sizes as i expected, while on Chrome:
font sizes are wrong throughout the page
the font size in the footer on the first page is different than on the second page ( footer fonts are the same on both pages on Firefox, as expected )
Am I missing something here, or Chrome doesn't handle well vw?
If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.
Take as an example this vw declaration for the footer:
footer address div {
display: block;
font-size: 3vw !important;
}
That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.
As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.
Start by adding the viewport tag in the head of all your pages:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
Once you do this you'll see more consistent behavior between browsers, and from one page to another.
More about the viewport meta tag
Hope this helps!
The font-size difference is likely Mobile Chrome font-boosting. Elements with dynamic height get boosted automatically. A solution is to give the element or parent a max-height:
.parent {
max-height: 999999px;
}
But it's probably best to apply that max-height directly to the element containing your text so it doesn't effect anything else you might be doing in your layout.
Test it on a real device, since Chrome's Dev Tools doesn't show the boosting.
Related
I have a very interesting case with a website on WordPress. All responsive design is done well and it looks awesome on mobile devices. But in a very particular case, everything looks like a mess - the fonts on the website look very big, all the elements in the Slider Revolution slides also look not in place.
The issue appears when the user has set the Text size of the mobile device to Extra large. This is done in settings on the mobile phone. After that when you browse the website via the Facebook In-App Browser or Firefox, the described issue appears. In Chrome and Opera, it looks fine.
I have <meta name="viewport" content="width=device-width, initial-scale=1"> in the header. Also tested
-webkit-text-size-adjust: none;
text-size-adjust: none;
But I don't see any improvement. Any ideas about what might be the problem?
GOAL:
Stylize a chat-interface on mobile devices.
PROBLEM:
I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem.
While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience.
All the CSS media queries acted as expected.
Yet ...on any mobile device we test, the sizing specified in CSS media queries has no effect and we are left having to zoom in.
EXAMPLE:
temp.mosaranch.com/chatbot-tester
QUESTION:
What could cause mobile browsers to not render specific media-query CSS rules, while the rules are applied when scaling down on a desktop browser?
You need a viewport meta tag in order for media queries to work properly on mobile devices.
Read more at MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm new to this and not really understand why is this happening and how to solve this.
I'm building my web-site with #media queries to be mobile-friendly. When I'm accessing the site from mobile I see the mobile-friendly version as I should, but when I'm trying to switch for desktop-view, the mobile-friendly version is remained and the desktop(normal) isn't showing.
With my *.css file I did as following:
my styles for global(normal - desktop) view
...
...
...
#media (max-width:500px){
my styles for mobile-friendly view
}
I don't want to use #media for my desktop view as not all browsers support #media, just in case some one will think it may solve this problem.
Hope for your help
Always ensure you include the following <meta> tag within your <head> </head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
The viewport tag is used to serve your website in a certain style regardless of device. The width property controls the size of the viewport (the virtual "window") and can be set to a specific pixel size, or the width of the device. The initial-scale property controls the zoom level when the page is loaded. maximum-scale, minimum-scale, and user-scalable all control how users are allowed to zoom the page in out out.
I personally have disabled user-scalable to keep a consistent page view, like when a user focuses on a select element it ensures the page does not zoom. Let me know if this fixes your problem, otherwise I will need some example of your CSS to figure out your problem! Cheers ~
The only browsers that do not support media queries are IE 5 to 8. IE 9+ supports it. Less than 1% of my website views come from an Internet Explorer browser, so in my opinion I would not sacrifice a good design for IE. I would recommend to always code mobile first, and after implement size specifications.
Implementing the viewport in the head section of your page is a must.
<meta name="viewport" content="width=device-width, initial-scale=1">
I wouldn't use a max-width:500px since this is a random max width... Stick to the correct ones, and your CSS will look like this:
*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/
Enter all base code here
/*-- TABLET --*/
#media(min-width: 641px) {
...
}
/*-- SMALL DESKTOP --*/
#media(min-width: 768px) {
...
}
/*-- DESKTOP --*/
#media(min-width: 992px) {
...
}
/*-- BIG DESKTOP (rarely used, but can be useful) --*/
#media(min-width: 1280px) {
...
}
Coding mobile-first CSS will simplify your code and create a solid style base. Switching your habits to mobile-first coding will be a plus for you and the designers that may eventually need to work with your layouts. This should be considered an effective method to help create bulletproof responsive designs.
I've made a webpage for myself: http://av.nettfolk.no/
When I use Safari on my iPhone (5 and 6, 9.2.1), tap on a link to a certain site (Inma), and then go back to my site, some fonts increase in size.
For the other sites, they don't change when I go back to my site.
If I visit this certain site, and go two pages deep, then go back two steps to my site, then the fonts are the right size.
I've tried a bunch of things, but I just can get this to work.
Does anyone know why this is and how I can fix it?
It worked when I double checked one of my previous attempts and found that I had written a line wrong. This worked:
html {-webkit-text-size-adjust: 100%;}
I never found out why Safari only enlarged the fonts when I was coming back from certain sites.
<meta name=viewport content="width=device-width, initial-scale=1">
I wonder if the =viewport doesn't have quotes upsets it -> name="viewport"
Like here:
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0" />
It also helps to specify font size in the body (and html for some browsers), so:
html, body {
font-size:100%; /* <-- equivalent to 16px */
}
I'm Making a website for Desktop+iPad. Site look fine in Desktop browsers including Safari.
but in iPad fonts are big and breaking the layout.
This problem can be solved if i use
body {
-webkit-text-size-adjust:none;
}
But according to this info http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ this code applies to Desktop Safari. user in Desktop safari cannot adjust the size which is not good for site's accessibility
is there any other alternative to solve this big text problem in iPad.
Use this instead:
-webkit-text-size-adjust:100%;
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />