I'm having problems getting a Viewport which works on an android smartphone.
My site is fully responsive down to 480 pixels wide, whereupon it has a min-width set of 480px on the body tag.
My first viewport was this:
<meta id="myViewport" name="viewport" content="width=screen-width, user-scalable=yes"/>
This worked on most devices I checked, but on an Android phone, it appeared zoomed in and did not automatically shrink-to-fit to the width of the screen.
I then tried using javascript so that onload, the width attribute of the viewport changed to 480 rather than screen-width should window.innerWidth < 480. This half worked: when the page loaded, it then resized to fit the screen. However, during the load, it was still zoomed in, as expected.
Finally, I changed it to...
<script>
if (window.innerWidth < 480) {
document.write('<meta id="myViewport" name="viewport" content="width=480, user-scalable=yes"/>');
}
else {
document.write('<meta id="myViewport" name="viewport" content="width=screen-width, user-scalable=yes"/>');
}
</script>
This goes back to being zoomed-in. It works on other devices I have used.
Any ideas?
Try using the following meta tag
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1 initial-scale=1.0" />
Hope you are missing the scale parameters.
Related
on iPHONE5s(640*1136), mobile safari returns 320*568. window.innerWidth and innerHeight return 981*1409
on Compaq 8 1400(768*1024), Android Chrome returns 768*976.window.innerWidth and innerHeight return
980*1103.
1.How can i correctly detect the correct screen resolution with mobile safari and chrome?
2.Why window.innerWidth and innerHeight return values which are much larger than screen resolution?
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script>
console.log(window.screen.width);
console.log("<br />");
console.log(window.screen.height);
console.log("<br />");
</script>
<body>
<br/>===================================<br/>
</body>
</html>
I think window.screen.width and window.screen.height always return viewport size in pixel, which is always 320*568 for iPhone5 and up, and 320*480 for iPHone4s and below.
window.innerWidth will return the actual pixel size. They are different.
You can check the viewport size of popular devices here: http://viewportsizes.com/?filter=iphone
In mobile phone, the viewport size is not always equal resolution, whereas in desktop computer, you can assume they are the same.
Use wiewport metatag to adjust page width to screen width on mobile device:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
By the way, you will get not physical pixels, but css pixels, used to measure all elements that you define using px in css. For example, on all iPhones viewport width is 320px (for both retina and non-retina displays)--this is made to make pages look similar on various mobile devices, independently on pixel density.
I created a little game in Canvas, but I have a problem. Some users who have the default zoom set to something other than 100% can't see the entire game page.
I have tried using this CSS:
zoom: 100%;
This HTML
<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />
And this JS:
style="zoom: 75%"
Any ideas how to programatically set the page zoom?
You can set zoom property on page load
document.body.style.zoom = 1.0
But, zoom is not a standard property for all browsers, I recommend using transform instead.
var scale = 'scale(1)';
document.body.style.webkitTransform = scale; // Chrome, Opera, Safari
document.body.style.msTransform = scale; // IE 9
document.body.style.transform = scale; // General
http://jsfiddle.net/5RzJ8/
You can reset the code with this:
$("input, textarea").focusout(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});
I think, this is very helpful answer how to detect page zoom level in all modern browsers. Then the answer to your question for IE:
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
It is working in chrome 66 :
document.body.style.zoom = (window.innerWidth / window.outerWidth)
The only way I found that works natively is in designing my HTML/CSS with the units "vw" and "vh" (% relative to the viewport) instead of "px". You can use it everywhere you used to put "px" (font-size, width, height, padding, margin, etc...). Very useful for a page designed to be display full screen only (no scroll) or "Kiosk-style". "vw" and "vh" are not affected by browser zoom.
See: https://www.w3schools.com/cssref/css_units.asp
For mobile browsers, #Linden's answer worked the best for me on Chrome. However on mobile FF it needed some additional tweaks, I came to version that works in both browsers:
let restore = $('meta[name=viewport]')[0];
if (restore) {
restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
setTimeout(() => {
$('meta[name=viewport]').remove();
$('head').append(restore);
}, 100); // On Firefox it needs a delay > 0 to work
}
Also, the restored page viewport tag must have explicit maximum-scale to allow zooming on Firefox after resetting, so I set it initially to this:
<meta name="viewport" content="width=device-width, maximum-scale=10">
Tested on mobile Chrome 76.0 and mobile Firefox 68.1.
I'd try both solutions but the following is seems to be a bug in echarts which leads to cursor deviated.
document.body.style.zoom = 1.25; // work but not to be expected.
I wonder if there any solution for the browser to directly modify the zoom ratio just like what ctrl++/- effect.
how could I make my simple website-quiz fittable to tablets and mobile phones? The size of the quiz is 1024x672 in landscape mode. The size is static. If there's no bullet-proof solution for all devices, I would prefer a solution specific for iPhones and iPads.
Here's the quiz: http://wp.servitus.ch
Requirements:
auto-zoom dependent of current screen-size of the device
user should not be able to zoom manually
possible to force landscape mode ?
I already experimented with:
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
This works fine for iPads, but is way too large on the iPhone.
Any ideas ?
Currently I am using the code below. This meets my requirements for the moment (distinction between iPad, iPhone, Computer). If anyone has a bullet-proof solution for all possible devices, I would be glad if you would share it with me :-) Thanks!
$(document).ready(function() {
var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
var isTablet = (/iPad/).test(navigator.userAgent);
if(isMobile) {
$('<meta name="viewport" content="initial-scale=0.45, maximum-scale=0.45, width=device-width, user-scalable=yes">').appendTo('head');
} else if(isTablet) {
$('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
} else {
$('<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">').appendTo('head');
}
});
This meta viewport can't help you, as the initial-scale is 1. That's why it's way too big for iPhone: you tell the device that the initial scale of this page must be 100% of its size (here : 1024px width), you have to remove this parameter or set it lower (0.5 or 0.625, as 640/1024 = 0.625).
Try with (this should work for iPhone and iPad) :
<meta name="viewport" content="width=device-width">
or (this should be very small on iPad) :
<meta name="viewport" content="initial-scale=0.6,user-scalable=no,maximum-scale=1,width=device-width">
EDIT :
This should work :
<meta name="viewport" content="width=1024">
I used that trick on a mobile website that haven't been well coded, it forces the viewport to 1024 and make it fit in the device screen. You can add whatever parameters to the meta.
I'm making an hybrid mobile app using Cordova 2.7.
I have a header, a content and a footer containing a button.
But, when i click on an input, the mobile keyboard comes up, leveling up the footer also. But if the input clicked is positionned behind the button of the footer, it does as if I clicked on the button ! So I can't stay focus on my input !
Do you have any idea to fix it ??
I found this solution :
var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
if(window.innerHeight < initialScreenSize){
$("footer").hide();
} else{
$("footer").show(); } });
}
did you set the height of the viewport?
If not then please set the height and width of the viewport as follows.It will scroll your webview to up so that you can write on the text field.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,
width=device-width, height=device-height" />
and also do not forget to change the preference 'KeyboardShrinksView' to false in config.xml file.
I am having an issue on my website I am building when viewing on an iPad or iPhone.
The header of the page is position:fixed; to the top. Whilst the rest of the website scrolls down in a container div.
Basically when i view on the iPad, and pinch to zoom. The header element zoom and moves to the right, and the scrollable content moves left and also enlarges so i end up with as website that is in two sections?
I have attempted to use the min-width:1024 css and user-scalable=0 but neither work. The user-scalable stops it from being zoomed but then when it rotated to portrait from landscape, the website retains the width at landscape as it rotates, so then the website is too wide for the screen.
Hope I have explained this well enough.
I have tried some javascript which I got from this website but that completely scrambles the whole website as it rotates...
the code I tried to use is below:
...html header...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
...javscript...
var checkOrientation;
checkOrientation = function() {
var viewport;
viewport = document.querySelector("meta[name=viewport]");
if (window.orientation === 90 || window.orientation === -90) {
return viewport.setAttribute("content", "width:device-width, initial-scale=1.0, user- scalable=0");
} else {
return viewport.setAttribute("content", "width:device-width, initial-scale=0.6, user- scalable=0");
}
};
window.onorientationchange = function() {
return checkOrientation();
};
checkOrientation();
Thank you in advance