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?
Related
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.
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 made my site responsive using media queries and tested it by resizing my browser and it works fine. I also used a website to see how my page would render on apple devices, specifically iPhones, and the RWD worked. But when I looked at my site on an actual iPhones, or any other smartphone for that matter, it shows the page in "desktop mode"(i.e. not rendered with the media queries). Can someone please explain to me why this is? Sorry I don't have an example but I figured it's a common problem/fix. Thanks guys.
The first thing that comes to mind, as I've done it before, is did you forget your viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
Using the YouTube iFrame API to embed a video I have come across a strange bug.
The bug is only apparent on Mobile Safari (iPad3, mini and iPhone)
No matter what I do to set a specific height or width the links under the video do not work. It's as if the iFrames height is not being honoured by safari.
After about 4-5 lines the links start working again.
I have seen one article which says you need to set the attribute scrolling="no" on the iframe but this is YouTube API embed so not possible.
Demo below:
http://jsfiddle.net/sidonaldson/rqRvx/2
player = new YT.Player('player', {
height: '200',
width: '200',
videoId: 'J---aiyznGQ'
});
I'm experiencing a similar issue on mobile Safari on the iPhone. Loading multiple YouTube videos "disables" any links rendered below them and only allows you to play the videos in the order they were loaded. It's a very weird behaviour and what I've also found is that when you play the last video, the links become clickable again.
What I've discovered is that this happens only when the viewport meta tag is used.
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Although removing it fixes the problem, I'm not sure this is something you'll want to do for a mobile web app.
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;" />