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);
}
}
Related
For various reasons, I am creating a site (not online yet) that has separate pages for mobile. I want to add something to the "monitor" site which says "if the browser width is less than X pixels, view *mobilepagename.html instead of this page. What code can I add to the main site CSS to do this?
You can't switch pages with only CSS. You can do media queries to change styling based on screen size though.
#media screen and ( min-width: 'px' ) and ( max-width: 'px') {
/* Mobile Styles */
}
Or you can use
#media screen and ( max-width: 'px' ) {
/* Mobile Styles */
}
max-width and min-width don't need to be in pixels either. You can use a variety of units like vw, em, etc.
If you want to switch pages based on screen size you'll need to use Javascript.
if ( window.outerWidth < x ) {
window.location = 'newpage.html';
}
Edit
Combine the above Javascript with a resize event.
window.addEventListener('resize', function(e) {
if ( window.outerWidth < 1024 ) {
window.location = 'yourmobilepage.html';
}
});
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 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 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
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 */
}