Want to include a conditional stylesheet for when the screen is a certain size, so
for example I have
<link rel="stylesheet" href="stylesheets/responsive.css.scss" media="screen and (max-width: 900px)">
in the head. However it's being called despite the screen size being greater than 900px.
Is my mark-up incorrect?
Thanks!
Related
I changed this site over to html5 using the html5 boilerplate. Everything looks fine when viewed on a desktop or even an ipad but when I view it on my iphone it zooms in only showing the contents of my .wrapper div. I've tried removing the
as many have suggested. I also tried adding maximum-scale-1.0, initial-scale=1.0, and minimum-scale=1.0 and none of these or combinations of them have solved the problem. I also tried setting my body and html tags to width:100% with no luck. I can't seem to figure out what the problem is and if it's a css or meta tag problem. The site is located at www.sweetestgourmet.com.
Try adding this to <head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
use css3 media queries
include meta tag as show in the head tag
then in stylesheet taget iphone as
#media only screen and (max-width: 480px){
/* write your css */
}
here is tutorial http://css-tricks.com/css-media-queries/
Just a quick question, I have a URL, which has alternate URL for mobile, and alternate URL for just another version of a page.
Is it okay to put in meta (in MAIN PAGE) something like:
<link rel="alternate" media="only screen and (max-width: 640px)" href="VER1">
<link rel="alternate" media="only screen and (max-width: 640px)" href="VER2">
...and on that pages I put canonical, to the MAIN PAGE?
Tnx
I am looking at using CSS Media Query to support multiple tablets (Android/iPad). Below is the Media Query which I have;
<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">
Now my assumption is most tablets are below 1024px width. Please correct me on this front. Any tabular comparision would be great.
Also any other approaches besides device-width for media query would be fine.
I am looking at a generic way of designing my pages which would work for both desktop/tablet browsers...present and future (and may be even mobile). I am using fluid design (or called responsive design) for the same (everything in %...width/height/padding/margin all in %)
Bear in mind that a device such as an iPad can be used in both portrait and landscape orientations, so I would use the following media query:
#media only screen and (min-device-width: 768px) and (max-device-width: 1280px) {
/* .touch class from Modernizr */
.touch .element {color: #fff;}
}
Or if you'd like to keep the styles in their own document:
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">
Note: You could generally detect tablets by combining media queries with a feature detection library like Modernizr.
When we make iPad specific website ( I'm making different website for desktop users) and we also want to write different CSS for Portrait and landscape mode, what method you would prefer?
First method
We can keep single CSS file with only one http request
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
and use media queries inside to keep the code separate
/* CSS for landscape here */
#wrapper {width:1024px}
/* CSS for portrait here */
#media only screen and (orientation:portrait){
#wrapper {width:768px}
}
Second method
We could use 2 CSS files with 2 http request
<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
Which method you would prefer and and if you have any suggestion to improve please tell.
Note: I'm making separate website for Tablets, it's not for Desktop and Mobile
Edit 2: *In first method is it better to specify Landscape too or it's not necessary.*
Compare this with first method code
/* CSS for landscape here */
#media only screen and (orientation:landscape){
#wrapper {width:1024}
}
/* CSS for portrait here */
#media only screen and (orientation:portrait){
#wrapper {width:768px}
}
and Is it ok to remove style="text/css" from css link?
<link href="style.css" rel="stylesheet" media="all" />
And should I keep media="all" in link or it's not necessary?
I would prefer the first one because the whole CSS gets cached on the first request. With the second one, the CSS for the other mode will need to be downloaded so the screen orientation change will not be as smooth as with the first one.
I prefer the first method myself because I like having everything in one place. As for the necessity of style="text/css", you don't need to have it, at least with the HTML5 doctype, but I think it remains as a best practice thing. The same goes for media="all".
Say I have an existing CSS for desktop (desktop.css). I want to include iPad Safari css.
In desktop.css, can we just do a condtional import at the end..
#media only screen and (device-width : 768px)
{
#import "ipad.css"
}
In ipad.css, we will have only iPad relevant styles..
/* iPad Styles */
i.e. if it is an iPad user, the ipad.css would get imported, else it would be ignored.
What is the best approach?
In desktop.css, can we just do a condtional import at the end..
Actually, no, #imports have to come before any other style declarations.
But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles. So you're better off using another <link> element with that media query and pointing to your ipad.css instead:
<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">