I'm making a mobile version of my application support site and I have a little WebKit/iOS/HTML/CSS problem here...
I have a page, index.php, with mobile.css file attached. In my <head> tag I have:
<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />
My body's css:
body {
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif;
margin: 0;
background: url(../../images/textured_bg.png) repeat;
color:#454545;
font-size: 14px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px;
width:100%;
}
Everything works fine in portrait orientation, but when I rotate my iPhone to landscape, Safari scales my content so it looks like in portrait, but a little bigger:
My question: Is there a way, without making custom css for each orientation, to force Safari not to scale my content?
The key part to fixing this isn't the meta viewport tag (though that's important, too, but for different reasons). Here's the magic that fixes the text size on orientation change.
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
(I got this from StackExchange's mobile CSS file.)
You will probably want to use the <meta name="viewport" .../> tag (see MDN docs and Safari Web Content Guide). The mobile Stack Exchange layout uses this:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
I tried commas, didn't work - then tried semicolons, that DID work. iPod touch, iOS 4.2
Related
This is a website with the mobile view.
The website width is 640px but the iPhone renders the document in 678px. In android it look great.
I added viewport meta:
<meta name="viewport" content="width=640, user-scalable">
And the body CSS is:
body,html{
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
font-size:14px;
font-family: "Arial";
background: white;
direction: rtl;
text-align: right;
width:640px !important;
overflow: hidden;}
In iPhone it looks like this:
As you can see it adds 38 pixels on the left side, not related to the body (if I set the body background to blue the side still stays white).
I tried everything but with no luck.
Any ideas?
Firstly it would help to be starting with clean HTML and CSS—your HTML is far from valid, and that can cause all sorts of errors (see here just for the HTML errors...).
Secondly:
<meta name="viewport" content="width=640, user-scalable">
is incorrect. It needs to be:
<meta name="viewport" content="width=640, user-scalable=yes">
and it would be better practice if it was:
<meta name="viewport" content="width=device-width, user-scalable=yes">
(See here).
With a clean starting-point, it will be easier to debug. Also, turn on the Mobile Safari debug console and respond to any messages it gives you.
I finally found a solution.
These lines were added because of the right alignment on the body CSS:
text-align:right;
direction:rtl;
If I remove these lines and add them to a div inside the body it's working fine.
I've been working on my first responsive design, and I'm having some trouble when viewing it on my iPhone. When I open a page on the iPhone, it's a little zoomed in to the left – just enough to miss text on the far right.
You can find the website here. The viewport-meta tag looks like this:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
It looks fine on my computer and on my iPad. Any and all help is appreciated.
Try this viewport, it works great on my website:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Found it. I had put width:100%; and padding:0 10px; on the .wrapper element under #media only screen and (max-width: 600px). Changed it to width:96% and padding: 0 2%;, and it worked like a charm.
Thanks for the help!
See if you are using 100vh in your CSS anywhere. If you are using 100vh it counts the menu bar and bottom toolbar as part of the 100vh. See https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
Try to add width:100%; overflow:hidden; to both body and html elements. If your page load differently, its definitely a css issue.
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 recently have been working on a pilot mobile website for the company I work for. After performing a small alpha test, I came across several width issues for blackberries and iphones.
When you access my mobile site on a blackberry bold or an iphone, the width container is ending maybe 5-10% shy of the overall width of the view. On a blackberry curve, the container gets cut at maybe 50-60% of the overall width except for the speaker images on the homepage.
Here is the site:
http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html
I originally found this line of code to help resizing on an ipad, but have had no luck with blackberry/iphone specific issues.
<meta name="viewport" content="user-scalable=no, width=device-width" />
Just as a sidenote, I haven't experienced any width issues on any android devices.
Please help! And let me know if I can provide anymore information!
try this:
<meta name="viewport" content="width=device-width, maximum-scale=1">
EDIT:
After further review, it looks like the issue is with the style on .bottom - it has a width of 100%, but a padding of 10px, so it will be 20px larger than the screen.
I also noticed there's a white bar below your content on the page, I assume you don't want that. It's fixed in the .container style below.
Here's an easy fix for that. Just replace the following styles:
.bottom {
background:#2D3192;
width:100%;
}
.bottom p {
font-size:.70em;
color:#FFF;
font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
font-weight:400;
padding: 10px;
}
.container {
width:100%;
padding-top: 10px;
background:url(http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/P1656_mobileBG.jpg) repeat-x #FFF;
margin:0;
top:0;
}
I left the old blocks in so you'll be able to just swap them out with your current ones.
Oh, and you can also change your meta back to:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Hope that helps!
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%;
}