I have a problem with media queries not being used on mobile device. This works correctly on the browser, but not on mobile devices (it actually seems to render differently between Lumia 800 and iPhone phones).
I've been through most of the posts with this problem on here, and in most cases people left out the meta tag, but I've already set it in the head of the document;
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This is my mobile CSS file:
/* ===== == = === 20em (320px) === = == ===== */
#media screen and (min-width : 20em) {
.slidercontainer {
display:none;
}
}
#media only screen and (min-width : 30em) {
}
/* ===== == = === 37.5em (600px) === = == ===== */
#media only screen and (min-width: 37.5em) {
}
/* ===== == = === 48em (768px) === = == ===== */
#media only screen and (min-width : 48em) {
.slidercontainer {
display:inherit;
}
}
/* ===== == = === 56.25em (900px) === = == ===== */
#media only screen and (min-width : 56.25em) {
}
/* ===== == = === 68.75em (1100px) === = == ===== */
#media only screen and (min-width : 68.75em) {
.container {
width:1200px;
}
}
/* ===== == = === 81.25em (1300px) === = == ===== */
#media only screen and (min-width : 81.25em) {
}
And in the head area I also have the 2 stylesheets included, a default one with the regular CSS and mobile with the .. well, mobile styles :)
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="all"/>
I found out the problem it seems, I used to have only
<html>
<head>
in the header document, but once I changed it to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
it started using the mobile stylesheet as well!
A rookie mistake :)
Thanks everyone for the suggestions!
You can change it to detect a device:
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld"/>
Or, you can change it to detect a screen size:
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"/>
You can read more about media types: http://www.w3.org/TR/CSS2/media.html
I'm not entirely sure this is a CSS media query issue.
Even on desktop you are picking up a horizontall scrollbar below c.1240px.
I think this is related to the <div class="sidebox">. If you inspect the site using developer tools (in Chrome) or Firebug you can clearly see that someelements are breaking out of the container.
I suspect this is due to a positioning issue or mixing %-widths with defined px-widths.
Try using this method if you would like or Bootstrap 3 If Mobile First Frame Work
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Related
When using CSS, I can properly align my elements using css with Chrome. In chrome inspector-> ipad view, all looks as they should be. But when I test it on actual iPad, some CSS are not applied. I've found ipad specific CSS media queries as follows,
** /* Safari 7.1+ */ **
_::-webkit-full-page-media, _:future, :root .my-class {
padding-right: 0;
}
**/* Safari 10.1+ */**
#media not all and (min-resolution:.001dpcm) { #media
{
.my-class {
padding-bottom: 0;
}
}}
**/* Safari 6.1-10.0*/**
#media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { #media
{
.my_class {
padding-bottom: 0;
}
}}
Problem is, while they're working fine with portrait mode, There is no specified way for me to apply CSS into landscape mode. How can I use media queries for landscape mode in real iPad device/safari on iOS? Without affecting any other browser?
Update
I'm not looking for standard media queries like,
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES */ }
Landscape Mode
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES */}
What you are looking for cannot be achieved with media queries alone, you must use Javascript to find an Ipad Safari user agent:
function isiPad() {
return (
(navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1)
);
}
Using this Javascript, you can detect if the device is an Ipad, and apply a class on the body - using Jquery in the following example:
if (isIpad) {
$('body').addClass('isIpad');
}
Afterwards, write your media queries as suggested above:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.isiPad .myclass {
/*styles*/
}
}
Although I can see why an iPad differentiation is needed, I can't understand why a Safari differentiation is - so, a user would visit the same webpage/webapp with Safari and see something different compared to Chrome or Opera or a different browser? :/ UX-wise doesn't sound right.
You should try this one first as it covers current Safari versions and is pure-Safari only:
This one still works properly with Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
color:#0000FF;
background-color:#CCCCCC;
}
}
here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Alternate method:
/* Safari 11+ */
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none)
and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
To use them:
<div class="safari_only">This text will be Blue in Safari</div>
And also you can make use of JavaScript to detect the browser and append a specific stylesheet if its Safari, for eg:
var isSafari = /Safari/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css"
href="path/to/safari.css">')
};
i have done the website it is working fine in all the mobile devices but in Iphone5 the font size not accepting. it is bigger and bolded than what i have give in css code. below the code i have given for common
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
so i want any specific code do i need to add for IPHONE 5. thanks
In order to target mobile devices, you will need to make sure you have the following in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And then add the mobile media query in your stylesheet:
#media (max-width:767px) {
/* Add mobile specific styles here */
}
I know in your question you want to target only an iphone5, however it is a good idea to add one media query to target all mobile devices and you won't have any issues and can add styles for mobile only within said media query.
Edited Answer
/* iPhone 4/5 portrait mode */
#media (max-width:320px) {
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
}
/* iPhone 4/5 landscape mode */
#media (min-width: 321px) and (max-width: 480px) {
*/ Styles go in here */
}
Add this medai query for iPhone 5 only
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
I'm not sure if it is the best way to do this, but you can set styles in js/jQuery when detecting iphone.
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
/*set some style here*/
}
});
Also, if your text is too big on iphone, you can try:
-webkit-text-size-adjust: 90%;
Anyway, Helvetica Nue is not standard font, so if you won't use external fonts import, they can look diffrent on some devices.
I am new to web development and I am trying to figure out how media queries work. I am trying to display one image for mobile devices and a bigger image for desktop. I have simplified the project to the maximum, to isolate the problem, and also made the background different colours to better differentiate. Here are my files:
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Website</title>
<link rel="stylesheet" media="screen and (max-width:500px)" type="text/css" href="phoneStyle.css">
<link rel="stylesheet" media="screen and (min-width:501px)" type="text/css" href="desktopStyle.css">
</head>
<body>
<div id="wrap">
<img id="phone" src="phoneImg.jpg" height="100%" />
<img id="desktop" src="desktopImg.jpg" height="100%" />
</div>
</body>
</html>
CSS:
phoneStyle.css
#desktop {
display: none;
}
body {
background-color: red;
margin: 0px;
}
desktopStyle.css
#phone {
display: none;
}
body {
background-color: black;
margin: 0px;
}
I only get the desktop image with the black background on both devices. I am testing on a local server using MAMP. Any help appreciated.
Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier if you know how to pin point a specific device. This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* The New iPad (iPad 3) ----------- */
#media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Instead of writing it this way you can follow a standard pattern of how to write media query here is the link http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Instead of manipulating it with id you can get the images depending on resolution
So I have a media query in my code that checks for device width. It works fine, just not in IE8 or lower obviously, as media queries are not supported.
I am therefore trying to throw IE8 a stylesheet (I figured I go with the one that is built for lower resolutions) but it seems that my media query (whether before or after the IE8 comment) stops IE8 from linking to any stylesheet at all.
Please could somebody inform me of a workaround? And is there a way to check for device width within the IE8 comment?
Here is my code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" media="screen
and (min-device-width:600px) and (max-device-width:1024px)" href="oldScreen.css">
<link type="text/css" rel="stylesheet"
media="screen and (min-device-width:1025px)" href="home.css">
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="oldScreen.css">
<![endif]-->
Move those media queries out into a CSS file (never put media queries inline).
Follow the format for standard device sizes. (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I'm guessing that IE8 doesn't like two references to the same stylesheet. If this is the case, then you may be able to get away with add a dummy parameter to one of the references and having the browser see it as two separate stylesheet calls: <link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy">
Edit:
Change
<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="oldScreen.css"><![endif]-->
to
<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy"><![endif]-->
I have css media queries like this
<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
THe problem is that smartphone-landscape.css file is also executing for iPad. How can I prevent it? so smartphone-landscape only works in iPhone' landsacpe mode (and for devices of similar resolutions) but not for iPad.
Refering to an article from Chris Coyer, here are some specific css code to target ipad only and smartphones with media queries.
For the full article: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Note the specific "device" reference for ipad only query:
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
So in your case:
<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
You will have to re-apply the stylesheet within ipad-landscape.css since the smartphone.css over writes it.