Anyone know why I still have some extra white space to the right of my web site when using an iPhone?:
(please check on an iPhone - this will not show with Firefox/UA Switcher)
I've adjusted viewport meta to "device-width" and my body's width is 100%.
I've Firebugged everywhere and just can't figure this one out.
You must set the width with "device-width" like this :
<meta name="viewport" content="width=device-width;" />
Try to wrap all your page content in DIV with just overflow:hidden style (no more styles necessary).
Related
I have a page for phone-devices with a width of 640px. Because I am going to use this in a fb-app I have it wrapped in an iframe with a width of 810px.
The problem is that no matter how I change the viewport-settings it never gets applied when browsing in the iframe. Accessing the page for phone-devices directly displays perfectly, but I somehow can't get the content to stretch the 810px of the iframe.
I can't make a working jsfiddle for this, but I have a case here: http://optimuscrime.net/display.html
The display.html-file simply has a
<iframe src="viewframe.html" style="width: 810px; height: 1200px;"></iframe>
viewframe.html has all it's content based on a width of 640px and a viewport-setting like this:
<meta name="viewport" content="width=640, initial-scale=1">
Before all the "show us what you've tried"-cries: I've tried every single combination of width, initial scale etc. The problem is that the content inside the iframe never gets affected by the viewport-settings.
Is there anyway to apply this method from Chris Coyier to mobile phones: http://css-tricks.com/full-browser-width-bars/
I applied
html {overflow-x: hidden;}
To get rid of the horizontal scrollbar, but when viewing on an iphone for instance. There is a horizontal scrollbar.
You can view the site here: http://www.revival.tv/turningpoint/
Try adding <meta name="viewport" content="width=device-width" /> within the head tag of your page.
Try adding it to the body tag, too.
body {overflow-x: hidden;}
Find the the thing that's causing the scrollbar and get rid of it. Hiding overflow-x seems a bit of a sticking plaster to me - if you do it right in the first place you shouldn't need this. Using media queries allow you to set the width of the page at difference screen sizes. This means you can pretty much wrap you content in div and set its width at the different screen sizes
I am finding that the initial-scale attribute is crashing Safari for a web page that contains an embedded Google Map. http://w.pat.tc
Use this code
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Thats usefull for my moblie web http://www.sepatuonline-murah.com
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).
I've converted an existing site theme (that I did not build) into a responsive theme for mobile support. It's a Drupal 6 site, if that matters.
I'm getting a slight right white margin on most interior pages, and I can't seem to find the culprit. I've tried setting the body width to 100%, setting overflow-x to hidden on the body tag, and outlining all the divs in red to find the culprit.
Do you know of any causes of a right margin on mobile Safari?
View port setting:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
The right side margin is not for scrollbar, as this margin differs from sites that fit right like cnn.com
An example interior page:
http://nano.omnidev3.com/nanotech-101
(Trying to avoid a Google index. This demo site is not under my control, so I can't put in the normal measures I would to properly prevent a stage site from being indexed.)
I'm sorry to say this, but that is one piece of disgusting HTML. 20+ CSS includes, 10+ javascripts, divs nested 10 levels deep...
Anyway, if the (logical) width of the device is 320px (i.e. all iPhones) then doing this:
<iframe src="http://meltwaternews.com/magenta/xml/html/93/2/v2_371253.html"
width="343" height="450" scrolling="no" frameborder="0"
allowtransparency="true" style="overflow-x: hidden;">
will make the page 343px wide, giving a white edge. Nothing special.
Try setting it to 320px or 100%.
I'm editing our News site's mobile CSS file. On the iPhone 3gs, 4 & simulator there are some pages (not all) there is an extra right margin.
Here's an example of a page WITH the extra margin:
http://bit.ly/mMA2q7
..and here's an example of a page without it:
http://bit.ly/iQeOGY
Both pages are using the same template. I'm guessing the images are adding the extra margin.
Here is our mobile CSS file http://bit.ly/iW5JVm and viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1;"/>
I tried applying different min-width values to the body but haven't found a solution.
Do you know how to get rid of this extra margin on the iPhone?
your photobanner div is too wide. It gets set to 500px which is way too much :)
try to add width:auto!important to it :)
Same problem, I fixed it adding this code in header:
<meta name="viewport" content="width=1100" />