I have had problems with the responsive design, so I made a stylesheet for mobile named mobile.css and linked it in the header, but no change.
<link rel='stylesheet' id='mobile' href='mobile.css' type='text/css' media='handheld' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Then in mobile.css
I havent copypasted all the code, because its a lot, but I know the code is right because it worked on my android phone, but not chrome and safari mobile.
#media handheld and (min-device-width : 768px)
and (max-device-width : 1024px) (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code code }
#media handheld and (max-device-width : 480px) (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code code code }
#media handheld and (max-width: 380px) (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code code }
#media handheld and (orientation: landscape) {
#-ms-viewport{
width: device-width;
}
code code }
try use following media query specifically for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS rules */
}
Related
I have written this media query for Macbook Pro. It is not accepting the media query. My Macbook's resolution is 1280x800 13 inches
#media only screen
and (min-device-width : 1280px)
and (max-device-width : 800px)
{
.col-md-12.webtestingsocial
{
margin-left: 29px !important;
}
}
It should work this way:
#media screen and (min-width: 800px) and (max-width: 1200px) {
/* Your Styles */
}
Also make sure you have this tag inside the HEAD
<meta name="viewport" content="width=device-width, initial-scale=1">
I think it's because making your min-device-width value higher than your max-device-width makes it invalid.
Have you tried making the min-device-width 800px and max-device-width 1200px?
Media Query for macbook 13 inches(1280*800)
#media screen and (min-width: 800px) and (max-width: 1281px)
{
//write your styles here
}
I am developing a responsive website and I'm applying the below media CSS queries:
Query1:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /*My Styling*/}
Query2:
#Media screen and (max-width:768px) { /*My Styling*/ }
Query3:
#Media screen and (max-width:1024px) { /*My Styling*/ }
I am also doing this meta statement in the head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
For some reason the second and the third query are being applied fine but when I test the first query (Practically targeting iPhone landscape) none of the defined styles get applied.
As you haven't specified a min-width for other queries you should organize your css like this:
query3
query2
query1
That way your last level of css will be applied correctly without getting overwritten by your other queries.
Emulation of a iphone device in landscape orentation in chrome works as intended:
http://www.bootply.com/tumubw4Ztq
#Media screen and (max-width:1024px) { body{background-color:red;}}
#Media screen and (max-width:768px) { body{background-color:yellow;}}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { body{
background-color:blue;}}
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%;}
}
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" />
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.