Iphone and Blackberry specific width issues on mobile site
I recently have been working on a开发者_StackOverflow 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!
精彩评论