I'm serving a page for phones and tablets. I am using OpenX to serve advertising on there. The advertising should be loaded in an iframe which should be the width of the page. I'm using bootstrap.
I tested things with this code:
<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>
This makes an iframe that's the exact same width as the browser window. Problem is that if I open this on an iphone it will rescale the iframe to the size of the window loaded in it, and that's very unwanted behaviour. It doesn't do it on my desktop, only on the iphone. I haven't tested yet with other smartphones.
Basically what I'm looking for is an iframe that is the same width as the screen (100%) and doesn't rescale when I load a bigger page in it
I'm pretty sure you are looking for the viewport meta tag to control this. Here is a reference that will explain it completely: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Basically you want to drop this code into your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
I am using the StageWebView Class to show html pages inside my iOS app. Everything is working fine except for the scrolling. It allowing the end-user to scroll the entire webview and is showing an unsightly gray background after reaching the end of the pages content.
My question is: Is there a way to disable the scrolling past the content of the page?
I don't think there's a way to do what. The StageWebView uses the iOS default browser which implements this feature (with a different background color, the behavior is the same though).
Did you try with this viewport?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The important part is user-scalable=no which should remove the "scroll bounce" of the iOS browser.
I am looking to find out why my #media queries are triggering when they are not supposed to, inside a Facebook Canvas iFrame Application. On a 810px wide page tab, the following media query is getting triggered:
#media only screen and (max-width: 767px) {}
Can someone explain to me why this would be the case? html and body are showing 810px wide. It works properly when viewing the same page on its own in a browser, as the query triggers as soon as I scale the browser down to 767px...
FYI this is the iFrame code that Facebook is displaying on my page tab:
<iframe name="app_runner_fb_https4fe3673cce0ac5c25797649"
id="app_runner_fb_https4fe3673cce0ac5c25797649"
style="width: 810px; height: 941px;" frameborder="0"
src="https://s-static.ak.facebook.com/platform/page_proxy.php?v=5#app_runner_fb_https4fe3673cce0ac5c25797649">
</iframe>
ALSO: The queries work just fine on the full app page (http://apps.facebook.com/...), as I have canvas width set to "fluid". The page tab doesn't seem to use this setting and only has a narrow 520px or wide 810px option.
Thanks for the input!
I have solved the problem. It turned out it was the viewport zoom or scale that was causing the queries to trigger. I did not have the default zoom level set on my browsers, so while it appeared to be 810px wide, it was actually something like 729, due to the zoom. To ensure users have their viewport zoom set to default, use the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am having some difficulty with Adobe Device Central CS3. I am doing a mobile website test only using Html and CSS I am busy testing it via device central using all the Nokia Phones in the library.
I did a moch up in Ps using Nokia N80 which is 352px by 416px (my photoshop document)
On my Meta tags I put the following code:
<meta name="viewport" content="width=device-width" />
<!--The iPhone will auto fit the screen -->
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.7, maximum-scale=5.0, minimum-scale=1.0" />
<!-- adjusting Web pages to screens and adjusting Web page content size -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript">
if((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1))
document.location = "http://iphone.mywebsite.com/index.html";
When I am viewing with devices less than 352px by 416px the content gets chopped and you have to scroll sideways. From the blogs that I have read putting "viewport" is suppose to fix the problem and make the content/site scalable according to the device used.
I should also make a note that I have a wrapper div that holds everything and it has a fixed width and height.
#wrapper {
width:352px;
height:416px;
background:url(../images/Site-Bg_02.png) repeat;
}
Help!
You could set your viewport width to 352, but I STRONGLY recommend instead designing your page with flexibility in mind, i.e. don't use absolute pixel values. Instead use percentage widths, and try resizing your browser (if you don't have access to actual devices to test with) to ensure that your elements fit correctly in a variety of widths.
The viewport tag will only work on certain devices, and fixed-pixel sizing is generally a mobile web no-no.
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%.