Ive set my fonts specifically as follows
* {font-size: 1em;}
html {font-size: 125%;}
body{font-size: 50%;}
p, ul, ol{line-height:1.7em; font-size:1.2em; margin-bottom:0.5em; }
Works fine on desktop browsers, and iPad (viewing is identical) - however the font size does not get any smaller on the iphone?
What am I doing wrong?
There are multiple solutions to your problem. Either apply the WebKit-specific text-size-adjust property:
html {
/* Prevent WebKit-based browsers from resizing the text: */
-webkit-text-size-adjust: none;
}
Or, you could define the viewport width in your HTML:
<meta name="viewport" content="width=device-width">
This tells the browser that it should use a viewport width equal to the device’s physical width. In most cases this prevents weird in-document text zooming inconsistencies, too.
Related
I'm having an issue trying to prevent the iPhone from resizing HTML e-mails to fit the screen. It seems that code below when put into the section has no effect.
My goal is just to stop the font re-sizing. I've tried other variations using -webkit-text-size-adjust:none; inline and in other way, all without success.
Would grealty appreciate any advice or an alternative solution.
#media screen and
(max-device-width: 480px){
/*fixes too big font in mobile Safari*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none; } } </style>
The iPhone seems to be a pain when it comes to resizing things, especially when you switch the orientation of the phone. Have you tried adding the meta tag with viewport settings in it?
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
It does prevent them from zooming, but I haven't found any better way to stop the iPhone from zooming on orientation change. I'm not sure if this will help in this situation, but just a suggestion to try out.
I been stuck w/ this problem and there's no available solution on the net that works.
Not until I realized what's causing this.
CAUSE:
This problem occurs if you have an image w/in the email. When the image auto-scale, the entire email/page will auto-fit in the window.
SOLUTION:
Add inline style for the image for min-width (300px so it doesn't take the entire 320px iphone width), max-width (your desired max with), and width of 100%.
i.e.
image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"
Worked for me, ...hoping this can help you too! ;-)
What you are doing is correct but the problem is that rather than using -webkit-text-size-adjust:none; inside a style tag, you should use it in the below manner:
<body style="-webkit-text-size-adjust:none;">
This means you should use this as an inline css property.
To get rid of that problem you have to put the following in your CSS body tag:
-webkit-text-size-adjust: 100%;
This way Safari keeps the text to 100% of intended size. In case you set the value to none, the users won't be able to increase the font and this is an undesired behavior.
This CSS property is supported and should work.
Check the official Safari supported CSS reference:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
Furthermore please note that the media type screen is supported in:
Safari 4.0 and later.
iOS 1.0 and later.
I hope this helps.
BR,
Tolis
A retina iPhone has a 640px width, your media query stops at 480px.
Anyway, you can get rid of the media query altogether. The only webkit based mail client that will use this property (-webkit-text-size-adjust:none) is iPhone's and iPad's Mail app.
Also the Mail app may also be the only client supporting CSS3
I am testing a HTML5 webpage in iphone. Also used CSS3. The page centered in all browsers. But problem is in iphone. It is left aligned here. I was trying -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But no luck. Please help me about this issue. The URL is:
http://www.stonegardenbd.co.cc/projects/vapp
Thanks.
Try setting the body min-width. I found that when the width was set, that it didn't center the body in the iOS browser.
Here is an example:
body {
background-color:#0e7242;
color:#FFFFFF;
font-size:15px;
min-width: 1000px;}
div.content {
margin:0 auto;
width:900px;
}
One thing to note is that if you have the meta viewport tag in there, the user will have to scroll out to see the entire webpage. You may prefer to have the entire width be loaded, and the user scroll in to see the text.
I am trying to create a special style sheet for mobile devices (for example - iphone).
I have in the main style sheet a rule like this one:
body
{
font-family: arial,georgia,"times new roman",times,serif;
font-size: 12px;
line-height: 18px;
}
and for a certain header: (all of my fonts sizes are in em except for the body which defines all)
#header #PageTitle h1{
font-size: 4.5em;
}
When I see the big header on my iphone it looks quiet small - what should I do to see it in a bigger size? How can I apply to all of the elements a rule to "just be twice as bigger" (I tried resizing the font-size of body but that didn't work).
What am I doing wrong and how should it be done correctly?
I found this piece of code which disables scaling in the iphone:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I am not sure if this is the exact solution (and it made everything look too big) - but this is half way there...
-webkit-text-size-adjust: none | auto | <percentage>;
So, twice as big would be: -webkit-text-size-adjust: 200%;
I would set the body set to 1em and then the headers, etc., set accordingly.
my site is a small, 540x500px box centered on a page. iPhone and Blackberry are both cutting off the top of the content. I have it absolutely centered on the page. I've been messing with the meta viewport settings in hopes have getting the page's margins dealt with on other devices and have had some luck, but when it comes down to it i cant find a solution that combines both of my lines of code.
My code is below.. I've explored media queries, setting the meta to device-width (cuts off margins) and a host of other options. honestly, I know I'm being picky, and I've spent a stupid amo unt of time on this.
I need help!
First, the HTML
<div id="container">content</div>
CSS
#container {
width:540px;
height:500px;
top:50%;
left:50%;
margin:-250px 0 0 -270px;
position:absolute;
}
Meta settings
<!--<meta name="viewport" content="width=device-width, initial-scale=1">
cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
works for iPad-->
Apple recommends that any page below 980px be declared in width in your viewport settings.
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
Used a media query to adjust my negative margins for mobile use. 1024px is max resolution on an iPad.. which covers most tablets.
HTML heading
<meta name="viewport" content="width=500">
CSS heading
#media only screen
and (max-device-width:1024px) {
#container {
width:500px;
height:500px;
top:0;
left:0;
margin:0 auto;
position:static;
}
}
It looks like your negative top margin is cutting off the content.
I've found that mobile content works best when positioned in a linear, top down fashion.
If that is the only div on the page, use a mobile stylesheet to strip out the positioning, keeping only the width, height, and some smaller, simpler margins.
Then use something like <meta name="viewport" content="width=580">, setting only the width.
This has worked for me in the past.
I have a mobile web application with an unordered list containing multiple items with a hyperlink inside each li:
My question is: how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accelerometer switches from portrait to landscape?
In portrait mode, I have the hyperlink font size set at 14px, but when I switch the device to landscape, it blows way up to 20px.
I would like the font-size to stay the same.
Here is the example code:
ul li a {
font-size:14px;
text-decoration: none;
color: #cc9999;
}
<ul>
<li id="home" class="active">
HOME
</li>
<li id="home" class="active">
TEST
</li>
</ul>
You can disable this behavior through the -webkit-text-size-adjust CSS property:
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
The use of this property is described further in the Safari Web Content Guide.
Note: if you use
html {
-webkit-text-size-adjust: none;
}
then this will disable zoom behavior in default browsers. A better solution is:
html {
-webkit-text-size-adjust: 100%;
}
This corrects the iPhone/iPad behavior, without changing desktop behavior.
Using -webkit-text-size-adjust: none; directly on html breaks the ability to zoom text in all webkit browsers. You should combine this with som media queries specific for iOS. For example:
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none;
}
}
As it was mentioned before, CSS rule
-webkit-text-size-adjust: none
does no longer work in modern devices.
Fortunately, a new solution comes for iOS5 and iOS6 (todo: what about iOS7?):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
You can also add , user-scalable=0 to turn off pinch zooming, so your website would behave like a native app. If your design brakes when user zooms, use this meta tag instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
You could also opt for using a CSS reset, such as normalize.css, which includes the same rule that crazygringo recommends:
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
As you see, it also includes a vendor specific rule for the IE Phone.
For current information about the implementation in different browsers, refer to the MDN reference page.
You can add a meta in the HTML header:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
As of March 2019 text-size-adjust has a reasonable support amongst mobile browsers.
body {
text-size-adjust: none;
}
Using viewport meta tag has no effect on the text size adjustment and setting user-scalable: no does not even work in IOS Safari.
The below code works for me.
html{-webkit-text-size-adjust: 100%;}
Try with clearing your browser cache if it does not work.
In my case this trouble has been because I used CSS attribute width: 100% for HTML tag input type="text".
I changed value of width to 60% and add padding-right:38%.
input {
padding-right: 38%;
width: 60%;
}