here is my meta for the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
and this is my css:
/* ---------- */
/* iPad 3 */
/* ---------- */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: landscape) {
body { background: red; }
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: portrait) {
body { background: orange; }
}
/* ------------ */
/* iPhone 4 */
/* ------------ */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: landscape) {
body { background: blue; }
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: portrait) {
body { background: gray; }
}
why iPad3's css overwrite the iPhone4's one?
Do you have CSS outside of these queries?
Your issue is that your iPhone queries have min-device-width:640px but an iPhone (even the 4) is 320px wide [with a scale of 2, yielding 640 points of usable space], so those queries are not being applied (but neither should the iPad ones, which is why I'm asking if there is additional CSS outside of the queries)
Try to change the order of device specific css(e.g. take iPhone css above iPad css). I have no idea it will solve your problem. But, i have seen this in HTML5 boilerplate template. An d i have read it somewhere that we should always write css code for small devices first.
Related
I'm trying to use media queries, however they aren't working when I go to my iPhone. When I resize my browser window it works fine though. They look like the following:
#media (max-width: 480px){...}
And I've including the following meta tag at the top of the file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any idea why it wouldn't be working properly?
EDIT
Try this:
/* ----------- 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) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
You can use this as reference for iPhones.
I am working on the this website. I have added the following code to make it hide the bottom menu when someone opens it on a mobile device,
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
display:none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
.footer-p-1{
display:none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
.footer-p-1{
display:none;
}
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
display:none;
}
}
For some reason, the css does not work. Please guide me where am I wrong?
Thank you
Problem:
The browser currently outputs your CSS as:
-webkit-min-device-pixel-ratio is not valid any more as the w3.org CSS validator outputs:
Solution:
-webkit-min-device-pixel-ratio is deprecated and needs to be converted to min-resolution
You will need to unprefix the media query condition:
Unprefix Webkit device pixel ratio
I think you must not define Min-max but if you want to hide it for mobile device like with widt < 800px try this:
#media (max-width: 800px) {
.footer-p-1{
display:none;
}
}
comment the other and try only with this
I have developed an app with iPhone as design target (i.e. 640x960 => 2:3) and I have done so using percentages for each division in layout so the ui streches itself with respect to device size. Now this works fine with iPad but I am having problems with 9:16 aspect ration devices. I have used Media Queries for the purpose but that isn't working.
The default code for division is:
.top_bar {
height: 9%;
}
Now using Media Queries aspect ratio:
#media screen and (min-device-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
But this is not working, not on browser and not on device.
I have added viewport metatag content value as
content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"
Later I tried multiple resolutions to detect aspect ratio as:
#media
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{
.top_bar {
height: 7.5%;
}
}
But this isn't working either.
UPDATE - FIXED
Experiment a little and just changed min-device-aspect-ratio: 9/16 to max-aspect-ratio: 9/16
and its working fine now.
#media screen and (max-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
put Your meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1">
And write Your Media queries
#media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}
maybe this is simple but I havent found the answer yet
How do I detect either iphone, ipad, ipad, android phone in any mode via CSS?
I read this
Detect iPhone/iPad purely by css
that describes how to detect all the specific devices
But what I am looking for is to distinguish between desktop/laptop AND all ipad/ipod/iphone/android devices in general
Here are my notes on the matter: For any device - do your research on it's screen sizes and ratios and then do a #media query in your stylesheet for each device.
iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
(portrait or landscape) on the iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Mobile Phones Portrait
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
Mobile Phones Landscape
#media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
Mobile Phones Portrait or Landscape
#media screen and (max-device-width: 640px){
/* some CSS here */
}
iPhone 4+ Portrait or Landscape
#media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
iPhone 5 Only
#media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (- webkit-min-device-pixel-ratio: 2) {
/* styles here */
}
iPhone < 5: aspect ratio
#media screen and (device-aspect-ratio: 2/3) {}
Tablets Portrait or Landscape
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
Desktops
#media screen and (min-width: 1024px){
/* some CSS here */
}
Styles only between two sizes.
#media screen and (min-width: 319px) and (max-width: 1281px){}
BTDUBS - Did you know that WordPress has an is_iphone() global built in?
global $is_iphone;
if ( $is_iphone ) {
// do something if $is_iphone is true
}
you could use #media queries to solve your problem, the below maybe something you could try. You can also you device orientation as a setting to target your devices or set your max width like below and then write your css. Hope this helps.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
I have this #media setup:
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
With this setup it works on the iPhone but it does not work in the browser.
Is it because I already have device in the meta, and maybe have max-width:480px instead?
I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read #media. When I use #media, I use it like this:
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
#media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
But you can do whatever you like with your #media. This is just an example of what I've found best for me when building styles for all browsers.
iPad CSS specifications.
Also! If you're looking for printability you can use #media print{}.
The underlying issue is using max-device-width vs plain old max-width.
Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px.
This will work on desktops when the window is narrowed. */
}
If website on small devices behavior like desktop screen then you have to put this meta tag into header before
<meta name="viewport" content="width=device-width, initial-scale=1">
For media queries you can set this as
this will cover your all mobile/cellphone widths
#media only screen and (min-width: 200px) and (max-width: 767px) {
//Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px //
}
For iPad and iPad pro you have to use
#media only screen and (min-width: 768px) and (max-width: 1024px) {
//Put your CSS here for 768px to 1024px width devices(covers all width between 768px to 1024px //
}
If you want to add css for Landscape mode you can add this
and (orientation : landscape)
#media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait) {
//Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //
}
The correct value for the content attribute should include initial-scale instead:
<meta name="viewport" content="width=device-width, initial-scale=1">
^^^^^^^^^^^^^^^
If you want to include both min and max width for responsiveness in the browser, then you can use the following:
#media (min-width: 768px) and (max-width: 992px){...}
#media (min-width: 480px) and (max-width: 767px) {...}
for some iPhone you have to put your viewport like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />