I want to display very wide, panoramic images in Mobile Safari (iPhone, iPod, iPad). These work fine in OS X Safari and in other browsers, but on Mobile Safari there seems to be a limit on the maximum image width.
Consider this web page:
http://basepath.com/public/test1.html
with this source:
<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 1</title>
</head>
<body>
<p>
2415 x 750 (about 3.2:1)
<p>
<img src='http://farm5.static.flickr.com/4129/4987348894_76194e79d6_o.jpg' />
</body>
</html>
It does exactly what I want on Mobile Safari. You can pan the photo. The aspect ratio is about 3.2:1.
But a wider image, about 4:1, gets scaled down, as seen on this page:
[http://]basepath.com/public/test2.html
[My low reputation prevents me from providing the above as a link. Limited to just one.]
The source is identical except for the commentary and image:
<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 2</title>
</head>
<body>
<p>
3028 x 750 (about 4:1)
<p>
<img src='http://farm5.static.flickr.com/4113/4994072964_1a7f7f90fe_o.jpg' />
</body>
</html>
You have to view these on Mobile Safari to see the problem.
Before you answer, some additional facts:
Image #2, which doesn't work, is only 200K (very low JPEG quality). Image #1, which does, is 700K. So size isn't the problem.
Putting an explicit width and height on the IMG element does indeed make the image the right size, but it's scaled up and therefore has jaggies. I want actual pixels. The problem therefore seems to be in loading the image originally, not processing it for presentation.
I've tried it without the viewport meta stuff, with no effect.
OK, now for my questions:
Is there in fact a limit on how wide Mobile Safari will show an image? Does anyone know of documentation for it, and, if so, what the rules are?
Is there any way to get around the problem? I've horsed around with JavaScript quite a bit to try to construct dynamic HTML to do the job, but, as I said above, I think the problem occurs when the image is first downloaded, far too early for anything done in JavaScript to be effective.
I found something about the rules that are applied whether an image is automatically downscaled in mobile safari:
http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk
Late to the game, but I had the same question and ended up getting the info from the horse's mouth here: Apple Safari Docs down at the Know iOS Resource Limits topic. Lot's of potential gotchas in there.
If you're using DIV with background attribute and you know the size of the image then set background-size attribute with image width and height.
background-size:3028px 750px
If using img tag then set the width and height values
<img src="image.jpg" width="3028px" height="750px" />
then it should work.
Related
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">
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).
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 website that needs to use 0.3 value for viewport on iphone, but 0.7 for ipad.
Is there a way to set viewport for only iphone or ipad?
Here is one solution...
<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
(function(doc) {
var viewport = document.getElementById('viewport');
if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
viewport.setAttribute("content", "initial-scale=0.3");
} else if ( navigator.userAgent.match(/iPad/i) ) {
viewport.setAttribute("content", "initial-scale=0.7");
}
}(document));
</script>
I found a simple way with jQuery!
Add this to the <head> tag:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>
The <meta> tag sets the default scale and the <script> tag re-writes the viewport if the device screen width is less than 600 pixels (I think all phone devices are under 600px).
I could not find a simple solution anywhere so I came up with this :)
Please note, meta viewport is comma-delimited list, you should not use semicolons.
<meta name = "viewport" content = "width = 320,
initial-scale = 2.3, user-scalable = no">
Source:
viewport syntax in Apple's documentation and
Configuring the Viewport – Apple article
(If I had more reputation points, I would add this as a comment)
For all mobile devices, try something like this.
<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
$("meta[name='viewport']").attr("content", "width=640");
}
</script>
If you need to set different viewport, based on the
device(iPhone/iPad), you need to set the viewport using device-width
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
What the above statement will do is set a viewport of 320px on iPhone
and 768px on the iPad..Guess that is what woudld translate into 0.3
and 0.7 u are looking for..
This worked but only after I realized that this line does not go in the ... section! Dumb of me, but maybe needs to be said.
Thanks!
That script from Tim that uses jquery seems to work well. I changed it a little bit and it seems to work for me. I added some scale parameters. It gave me the results I needed for my page display well on both iphone and ipad. Here is what I added:
maximum-scale=2.0; user-scalable=1;
I'm not sure you can set a viewport for only iPhone but you could set the media query and thus the CSS for only iPhone I think.
By setting the media query for only device widths of the iPhone (320x480) or iPad (1024x768) you could possibly achieve what you're trying for.
See my answer below on how to dynamically set your initial-zoom so that your entire site is zoomed correctly on page load (works for all device sizes).
Change tablet viewport to exactly show fixed dimension element