I am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
Related
I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).
Is there a way to use media queries to load only the required stylesheet?
I have tried:
#import url(mobile.css) (max-width:599px);
#import url(tablet.css) (min-width:600px);
#import url(desktop.css) (min-width:1200px);
and
<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->
but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.
Is it possible to load only the wanted resource using media queries?
I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.
Edit
Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! How do I download ONLY the stylesheet I want based on media query?
If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css
Try doing it within the HTML, for example:
<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />
source
I can't see why this would not work with a (min-width: 1200px)` (for instance).
Normally though css for small screens would be very small, with the small screen using most of the styling in the desktop version, with a few elements hidden and some resized.
I have a website already made. I want to make a mobile version of this. I basically want to import a table from the main site into the mobile site. I want to take the CSS code from the main site that covers the table and then input in my CSS file for the mobile site (I already put the HTML code into the mobile site). The problem is, when I do that it starts to overwrite the current CSS file and change the design.
Help please!!
You will need to use media queries. This is a css3 function.
In the top of your html, you need to put the following:
<meta name="viewport" content="width=device-width" />
Then, in your css, you will do something like this:
#media only screen and (max-width : 320px) {
/* Styles */
}
This is a reference site for commonly used media queries.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You will basically need to do this for each size device you are optimizing for.
Also, if you have several of these, you might end up with a very large css file.
That could impede download speed especially on a phone. In that case, create
separate smaller css files and use conditional statements in your html to specify
which css to call. In that case, you will need to use something like this in your html:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
I've just discovered CSS #media queries and I think they're great! However, I know that not all browsers support them (namely all but the most recent versions of I.E.).
What should I do then, in my default stylesheet? Should I target a normal-sized screen? Should I go route of lowest-common-denominator and load the mobile stylesheet? Or should I make the design completely fluid?
What is generally a good plan when making the default stylesheet for browsers that don't support #media queries?
It depends on whether you go with de 'mobile first' approach or 'desktop first'.
The desktop first should not cause any trouble with desktop browsers not supporting #media, because they will just ignore the mobile stylesheet rules, like they should. The only problem is mobile browsers that don't support media queries. They will render the page like seen on desktop. But most smartphones support media queries, except pre-win7 phones. The question is if you want to support those phones.
You stylesheet should look something like this.
body {
width: 960px;
margin: 0 auto;
}
#media only screen and (max-width: 500px) {
/* override desktop rules to accommodate small screens*/
body{
width: auto;
margin: 0;
}
The other approach is mobile first. You create a base stylesheet for mobile, and then use mediaqueries to spice thinks up for desktop users. You can put the desktop rules in a separate file, and use media queries and conditional comments to load it in modern desktop browsers and IE. But here the problem is IE mobile also supports conditional comments, so no pre-win7 phone support. Your html should look something like:
<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->
Making your design fluid will help a lot. The aim is that no matter what screen size, your site will always look good. Just resize your window to try it out. Fluid designs can't make your sidebar move to the bottom if the screen is to narrow. For this you need mediaqueries.
Good luck
I have one webpage that I want to pull different stylesheets for print, mobile, screen, etc.
I have screen and print working perfectly. I have two different stylesheets for mobile - one for modern smartphones (iPhone/Android), one for Blackberries. They're called mobile.css and blackberry.css respectively.
How can I simply have my page load the mobile stylesheet when iPhone/Android accesses the page, and the blackberry stylesheet when most Blackberries load the page?
Using max-width: 480px will work, but it will also force the mobile stylesheet upon a Blackberry (whose screen is also 480px wide), which is undesired behavior.
Any help?
For Printing:
<link rel="stylesheet" href="print.css" media="print">
For targetting the Blackberry specifically, you may have to do some User-Agent sniffing.
I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome.
Is this a feature that is not ready for implimentation yet?
If I want to adjust some styles when the browser window is less than 1024px wide. How can I do that?
The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.
http://www.w3.org/TR/css3-mediaqueries/
If you want to adjust the style when the viewport is less than 1024px you can use this rule:
#media screen and (max-width: 1024px) { … }
anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.
To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
To apply a style sheet to a document when displayed on any device less than 400 pixels wide:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
inside
#media all and (max-width:800px) {
body { color: red; }
}
for iphone
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
::combining media query
To see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:
320 and up:
‘320 and Up’ prevents mobile devices
from downloading desktop assets by
using a tiny screen’s stylesheet as
its starting point.
Lessframework:
Less Framework is a CSS grid system
for designing adaptive websites. It
contains 4 layouts and 3 sets of
typography presets, all based on a
single grid.