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;" />
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?
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 built sites and want to make it mobile responsive.
It is perfectly working on Chrome and Firefox but not on mobile.
I tested on Inspect though it is working properly on desktop browsers but not for mobile.
How can I fix this?
First and foremost, you should add a viewport on the HTML page.
Type this inside the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
Then, I personally think it's better if you link a bootstrap.css file. And I also recommend to use the media screen of CSS like this:
#media screen and (max-width: 800) {
/* The CSS codes when the device is less than 800 go here */
}
At least, that's how I do it.
And you can go and download or watch the video that I saw on YouTube. I don't remember it's name or link but its length is over an hour and the guy was making a webpage of a gym website.
I highly recommend to type these on your own rather than copying and pasting it, it will help you understand what each thing means, to not forget the codes so that you don't refer these kind if simple things.
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">
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!