I have a site which I am trying to get to site perfectly in all mobile devices. for that purpose i set viewport meta like below
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It seems works perfectly on the most of the devices but on the iOS devices, it seemingly ignores the meta viewport tag. I tried workarounds like
1: Added the meta tag with some delay
<body onload="javaScript:onloadHandler();">
<script type="text/javascript">
function onloadHandler() {
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;');
document.getElementsByTagName('head')[0].appendChild(meta);
if (typeof window["bodyOnload"] != 'undefined') {
bodyOnload();
}
}
</script>
Result : Most of the time it doesn't show the zoom level correctly. Some times the page is top left cornered.
Calculated the scale from device pixel ratio and used that scale value for initial scale.
<script type="text/javascript">
var scale = 1 / window.devicePixelRatio;
var viewportTag = "<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";
document.write(viewportTag);
</script>
Result : it doesn't show the zoom level correctly.
It looks the issue is with initial-scale value.
Does anyone have any ideas how I can get it to the correct zoom level with iOS 8?
EDIT:
This issue comes from iOS 8. The scaling issue happens only when the user tries to open multiple popup windows. There is one bug with popup windows with iOS 8. Hope the scaling issue will be fixed once Apple fixed the issue with popup windows.
This issue is resolved with new update for 8.1.2.
Related
The following page scales down in a desktop browser when the viewport is decreased
http://rocoru.com/blog/
However, when viewing from the iPhone itself, the desktop version is still shown regardless
why might this be?
Try to add the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can get some more information about this tag and why you need it by googleing
"viewport meta tag"
Try using this in your media queries for mobile.
.excerpt .entry p {
overflow: hidden;
}
I am adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim
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
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.