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
Related
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);
}
})();
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 would like to present a demo of a tablet application on a website (targeting desktop browsers).
I chose an iPad 2 for the demo whose resolution is 1024x768. Adding an iPad transparent graphic cover, the demo final size is 1210x1315px.
With such a resolution, most of the screens will be too small to display the demo properly.
I don't want to resize manually all the design, or to use CSS transform without knowing the relevant scale. Therefore, I'm looking for a way to resize automatically the design according to the available display resolution.
I tried to use the #-viewportproperty with no success...
Here is my non working code:
#media (min-height: 1400px) { /* if the screen's height is smaller than 1400px... */
#-viewport{
height:1400px; /* ... then, let's pretend it's 1400px high*/
}
}
I also tried this :
<meta name="viewport" content="height=1400, initial-scale=1" />
EDIT : jQuery workaround:
function resize(){
var documentHeight = $(document).innerHeight();
var targetedHeight = 1500;
if (documentHeight < targetedHeight){
var ratio = documentHeight / targetedHeight;
$('#container').css('transform','scale('+ratio+')');
$('#container').css('-webkit-transform','scale('+ratio+')');
$('#container').css('-moz-transform','scale('+ratio+')');
$('#container').css('-ms-transform','scale('+ratio+')');
$('#container').css('-o-transform','scale('+ratio+')');
}
}
This is what I finally did to achieve the expected result. I would have prefered a pure CSS solution...
I think you should be using media queries: Logic in Media Queries
I've put the following meta tag in my mobile HTML
<meta name = "viewport" content = "initial-scale = 1.0">
After I coded the css file for mobile version, I realized it doesn't look good on lanscape mode since it has a different width size. I get an empty 160 pixel area on the right side.
Other than writing a separate css file for landscape mode, is there any way getting out of this?
You also need to bind the orientation change event. You can do it with this sample script:
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
If your css layout is based on screen percents instead of absolute values it should allow you to adjust to any screen layout without multiple css files just fine.
Look at the percent option: http://www.w3schools.com/cssref/pr_dim_width.asp
Or if you had a layout you wanted constant, you could center it.
center align the outise wrapper.
body{
max-width:786;/*target size of page*/
margin:0 auto auto auto;
}
is the easiest way.
You can use media queries to detect orientation changes and run different styles for each all in the same stylesheet.
Also for mobile it's a good idea to you use % rather than px for widths - what units do you use for css for mobile web apps?
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
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);
}
}