iam developing a windows phone 8 + cordova project. in this i have a requirement to show some pages in landscape. In portrait the pages are looking fine and the size is correct. but when it comes to landscape the overall design is zoomed in.
Iam using this as my viewport style
#-ms-viewport
{
width: device-width;
width:350px;
user-zoom:fixed;
max-zoom:1;
min-zoom:1;
}
and in index.html i used,
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
Can somebody suggest a fix for this ?
Thank you!
Edit: What i want is to zoom out the size of the page only in landscape mode!
Fixed it by using the below code,
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("#-ms-viewport{width:auto !important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
Related
I'm making a fully responsive website but it's really handy to have a min-height of the site set to 480px, instead of "industry standard" 320px. I know meta tag viewport and this pretty much does the job for me on smallest screens:
<meta name="viewport" content="width=480, user-scalable=no">
But this works only for a mobile, any device with screen reporting more than 480px isn't scaled properly. For these, this one works:
<meta name="viewport" content="width=device-width, user-scalable=no">
Is there please a way how to combine both these? Somehow set smallest possible width of the site with no regards to the actual screen size but use any higher value of screen that 480px.
Thanks a lot, Jakub
Use the latter meta viewport value and simply set the min-width CSS property for the body or your container element to be the 480px value you require and set the width to 100%. The min-width will override the width value (as you would expect) when the 100% width falls below 480px.
I'd strongly recommend that you set box-sizing: border-box so you can add padding to your body or container without exceeding the total 100% screen width.
Please also note that disabling user scaling ("user-scalable=no") is poor user experience for many users, and in particular for those with accessibility needs. I'd suggest you set initial-scale=1 instead. See http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
The final result should look something like this-
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS-
#container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 480px;
padding: 20px;
width: 100%;
}
This will limit the mobile version to 520px;
<meta name="viewport" id="vp" content="user-scalable=no, width=520, initial-scale=0.5, maximum-scale=0.5">
<script>
window.onload = function() {
if (screen.width > 520) {
var mvp = document.getElementById('vp');
//mvp.setAttribute('content','');
mvp.setAttribute('content','width=device-width, initial-scale=1');
}
}
</script>
I'm not sure about the answer with container min-width, because Chrome mobile preview not understands it. Adding this hack(jQuery used):
jQuery(function($){
let upgradeViewport = function(){
let viewport = $('meta[name=viewport]');
let viewportMinWidth = parseInt($('head').attr('data-viewport-width'));
if (viewport.attr('content').indexOf('user-scalable=0')!=-1 || viewport.attr('content').indexOf('user-scalable=no')!=-1){
return;
}
if (!upgradeViewport.original) upgradeViewport.original = viewport.attr('content');
if(window.innerWidth <= viewportMinWidth) {
viewport.attr('content', 'width='+viewportMinWidth);
}else{
viewport.attr('content', upgradeViewport.original);
}
};
$(document).ready(upgradeViewport);
$(window).resize(upgradeViewport);
});
will dynamicly change viewport meta tag by the value in attribute data-viewport-width of head . Working fine, also with mobile-previewers.
First thing it is better to go with % rather than fixing the width=480px.(Example:- min-width: 45%). And the screen will automatically adjust itself based on the screen resolution.
I'm trying to develop a very simple mobile web app to show a list of websites via iFrame.
The app starts always in protrait mode and when it switches to landscape mode, the width of the iFrame is not updated, so the iframes does not fill the device width when rotating in landscape mode. I added the script in HTML to force the app to reload the iframe in case of orientation change, hoping it would have solved the issue, but without success.
This is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<script>
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},
}
onload = addNumber;
</script>
<iframe id="wc1" src="http://<url>" seamless></iframe>
<iframe id="wc2" src="http://<url>" seamless></iframe>
<iframe id="wc3" src="http://<url>" seamless></iframe>
<iframe id="wc4" src="http://<url>" seamless></iframe>
</body>
This is my CSS code
html, body {
width:100%;
height:100%;
padding:0;
border:0;
margin:0;
}
iframe {
width:100%;
height:100%;
padding: (0, 0, 0, 0);
}
I'm a mobile web development newbie and I swore that I tried every single solution I found on SO and other sites to make my code working, but without success.
you have set javascript as :
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},/*<= what is this bracket closing, and why extra comma???*/
}
onload = addNumber;
remove evrything and just keep this :
window.addEventListener("orientationchange", function() {
window.location.reload();
}, false);
also, for pure html way to check orient, add this in you head :
<meta http-equiv="refresh" content="1">
check this thread too => Detect change in orientation using javascript
I been trying to get the site to scale to fit on Portrait in iPad but to no avail .. this is my meta :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
also added this to script:
<script type="text/javascript">
if(navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
</script>
and on my CSS in Queries I tried this:
#media only screen and ( min-width: 768px) and ( max-width: 1024px ) {
body {min-width: 980px;}
}
basing on what I saw here:
iPad not scaling site down website correctly in portrait orientation
I tried height too, but to no avail...
There was also an a similar question here:
Safari on iPad Does Not Fit 980px Width Site in Portrait Mode
But to be honest i didn't understand if there is even an answer(I'm not taking viewport off..)...
As I mentioned, looking good but in portrait I have to slide to the left to see the whole thing. and lastly in mobile it fits perfectly in 320 but when landscape it still stays at 320 so I assume it might be the same case in scaling....I assume I didn't have to use %....but is that the case?
Maybe due to the old "orientation problem".
you may want to try this codes:
if (navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
jQuery(document).ready(function() {
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
});
}
}
Is it this iOS <5.1 scaling bug that's the issue -
http://adactio.com/journal/5088/ ?
This is fixed in iOS6 but if you'd need it for an older device you could try -
http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
or https://github.com/scottjehl/iOS-Orientationchange-Fix
So I'm having a strange issue with my responsive websites when switching from portrait to landscape mode on my iOS device. You can take a look at the live site here: http://www.aptify.com
If you view the site in portrait mode, then rotate the iOS device it's zoomed in.
I currently have the following meta:
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
I found one question similar to this: Media Queries - Landscape Mode on iPhone way too oversized, however the question was never given a correct answer. The only answer did mention using something similar to my tag above, but it was only: <meta name="viewport" content="width=device-width" /> without initial-scale=1.0 - does this make a difference?
I would also like to note this does not happen on android devices, only iOS devices.
Anyone have and fixed this issue before?
Thanks for your help!
I've included a link in the notes to help with that situation. Another way to fix it is use the code outlined in Jeremy Keith's "Orientation and scale" article.
<script type="text/javascript">
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
If you want to ignore your users rights and not allow them to zoom on their devices you could also set the meta viewport to the following which will solve the problem
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
If you change ipad position from portrait to landscape viewport scale will be wrong (site is to big for viewport). I've searched a lot and found the same problem on lessframework.com
Take a look — http://www.youtube.com/watch?v=MGDjaE-eKAY
But there is no problem on stuffandnonsense.co.uk/projects/320andup/
I can't find out what makes 320andup working right and lessframework.com working wrong on ipad.
Any ideas?
I view-sourced if for you
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}