My test site is here: one-story-beta.herokuapp.com
I am having an issue with the viewport in portrait mode, where the content is not scaling down correctly. It is fine in landscape view. This was my original viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
And then I tried:
<meta name="viewport" content="initial-scale = 1,user-scalable=no,maximum-scale=1.0">
But neither seemed to fix the problem. I've also tried to set a media query for portrait mode, where I set the body to be 768px. Something like this:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {
max-width: 768px;
}
header {
max-width: 768px;
}
}
But that didnt work either.
Am i missing something obvious here?
Related
I'm trying to get a media query for smaller devices only, in particular iPhone4 vs iPhone5 and larger. I haven't even started android. I tried the media queries I found here but I'm not having any luck.
Here's a simple test.
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="format-detection" content="telephone=no" />
<style>
body { background-color: blue; }
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { background-color: red; }
}
</style>
</head>
<body>
Testing
</body>
</html>
I expected it to be red only on iPhone4/4S and blue everywhere else but instead it's red on iPhone4/4S/5/5s/6/6Plus. It's blue on iPadAir, iPad Retina, and Desktop.
I tried adding the iPhone5/5s queries from the same page so I have both the iPhone4/4s queries and the iPhone5/5s queries. In this case I get green on 4/4s/5/5s/6/6Plus whereas supposedly I'm supposed to get red on 4/4s, green on 5/5s and blue everywhere else.
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
body { background-color: green; }
}
Some other things I tried. I got rid of all the meta tags. No change. I don't really care about the min device pixel ratio. All I care about is if the screen is too small vs not too small. Big enough is iPhone5/5s. Anything smaller I need to do special stuff.
How do I get it to be red only on iPhone4? (or on smaller than iPhone5/5s)
NOTE: I'm trying to avoid settings things for iPhone4 and then resetting them for anything larger because I have about 20 settings I need to change for small screens. In other words, 20 settings are the default and only for iPhone4 sized screens do I need to change those settings. I don't want to have to set them 3 times if possible.
In other words I want this
default css
iPhone4 {
a few overrides
}
not this
default css
iPhone4 {
a few overrides
}
notIPhone4 {
try to undo overrides // :(
}
You can use device-aspect-ratio which is another great features of media query:
body { background-color: blue; }
#media screen and (device-aspect-ratio: 2/3) {
body { background-color: red; }
}
Here is more device-aspect-ratio that I got from here:
iPhone < 5: #media screen and (device-aspect-ratio: 2/3) {}
iPhone 5: #media screen and (device-aspect-ratio: 40/71) {}
iPhone 6: #media screen and (device-aspect-ratio: 667/375) {}
iPhone 6 Plus: #media screen and (device-aspect-ratio: 16/9) {}
Also you can be really specific if you want to target one model only, for instance for iPhone 6 Plus I use following which I got from here:
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
and (-webkit-device-pixel-ratio : 3)
{ ... }
I have been testing media queries on Browserstack, I need to make specific changes to the page layout for iPads. I can get media queries to work on the desktop version of the site but I can not get media queries to work for all iPads. The following media queries work but only on the latest iPad version which Browserstack refers to as iPad 3rd(7). i have been referencing this site for media queries.
http://code-tricks.com/css-media-queries-for-common-devices/
This first one is the only one I have had success with, but only for iPad3, nothing else works for other iPad versions.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
h1.iPadThis {color:black;}
}
This should work for all ipad versions but only works for iPad 3
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
h1.iPadThis {color:orange;}
}
I have tried the following for iPad 1 and 2 but it does not work on Browserstack.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
h1.iPadThis {color:orange;}
}
And I have this in the head
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
Can anybody tell me what I am doing wrong here?
Thanks.
you also try this :
#media (min-width:600px) and (max-width:767px) {
h1.iPadThis {color:orange;}
}
or
#media (max-width:767px) {
h1.iPadThis {color:orange;}
}
I'm pulling my hair out about this… I know it has been discussed in many threads, but I couldn't find a solution that works for me.
Different problems in iPad and iPhone
When I use this:
<meta name="viewport" content="width=device-width, maximum-scale=3.0,user-scalable=yes"/>
The page displays fine in landscape-mode (on iPhone and iPad)
The page is too wide in portrait-mode and can't be scaled down with pinching
Now (and this is kinda hilarious):
<meta name="viewport" content="width=device-height, maximum-scale=3.0,user-scalable=yes"/>
The difference is width=device-height (vs. device-width)
The page displays fine on the iPad in landscape- and portrait-mode
The page is too wide on portrait mode on the iPhone, works fine in landscape
When I use initial-scale=1.0 everything's messed up totally (I read that initial-scale shouldn't be used anyway?)
Does anybody have an explanation for this???
if You use this: this will fix when you load into Landscape and go to Portrait.
fixed width kills it i think, specialy if you have fixed PX min-width included.
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || 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';
document.addEventListener('orientationchange', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1';
}, false);
}
}
also you can fix it with CSS , like this:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
html {zoom:0.75;}
}
it will zoom to 0.75 in portrait mode only..
Can you first test this:
<meta name="viewport" content="height=device-height,width=device-width">
I have a mobile website and a little problem with the Viewport meta tag in the -Part.
My code:
<meta id="testViewport" name="viewport" content="width=640">
It is working fine on an iPhone 4s but on the iPad 2, it doesn't work properly. I want the viewport to be set as the width of the users hardware. Is there a way to achieve it or do I have to read out the model type and set the Viewport with a switch or if code?
Thanks in advance.
Niels
edit:
Here's my CSS. What I want to achieve: let the site be displayed in the device-width. but if the display-size is smaller than 640px, then it should change the viewport to 640px. Not working on iOS 7.0, Safari:
#viewport {
width: device-width;
}
#media screen and (max-device-width: 640px) {
#viewport {
width: 640px;
}
}
edit#2:
Fixed it using JS in the of the index.html:
<meta id="viewport" name="viewport" content="width=device-width" />
<script>
if (window.innerWidth < 640){
var vp = document.getElementById('viewport');
vp.setAttribute('content', 'width=640');
}
</script>
Instead of setting content="width=640" try this one <meta name="viewport" content="width=device-width">
UPDATE:
To serve high-res images / change zooming for retina devices with your css you could use something like this:
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
i'm currently having troubly with a site that i'm converting to a adaptive-website. For some reason i can only get one of the orientations to work on the iPad. If i comment out the landscape styling the portrait styling works on the ipad and visa versa. I really don't understand what it is that i am doing wrong...
These are the media queries that i am using:
#media all and (device-width : 768px) and (orientation: landscape) {}
#media all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){}
Here is a link to the site www.imarken.dk
The problem is in min-device-width. Try to use 481 instead 768.
Give these a whirl:
#media only screen and (device-width: 768px) {
/* targets iPad */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* targets iPad Portrait */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* targets iPad Landscape */
}
I had this same problem today! As it turns out, removing my height=device-height in the meta viewport tag fixed the issue and allowed the CSS to switch between portrait and landscape as expected. Hope this helps!