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.
Related
I developed a website. The layout is fine in desktop. But it is not responsive. I tried for mobile with media queries like,
#media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}
I am using chrome development tools and make changes in the site according to the size 320 x 640. Now the problem is fine in simulator but not in the actual mobile.
Help me to find the solution.
The symptoms you describe suggest that you may not have a viewport metatag in the head of your page, so double check this first.
What you want is something like
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
More about viewport meta tags
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
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!
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">
I'm building an iPad magazine for a University project in the form of a web site to demonstrate some of the functionality of my proposed design (the real-life app would of course be native iOS)
I have looked at some frameworks like Sencha which seems overkill for what I want and seems to want to do everything inside JavaScript instead of keeping it to HTML/CSS and then adding the interactions on top. I have also looked at jQuery UI iPad which seems the most promising but I could do with some help getting it to work. Here is a demo of it working: http://jsfiddle.net/blackdynamo/yxhzU/
Here is a sample page for my pages: http://driz.co.uk/ipad/
What I need help with is getting the DIVS to sit next to each other in rows and then add the interaction whereby as a user swipes left, right and up and down it will jump between the different DIVS as though they are pages/sections of a magazine.
Here is a image that shows how the DIVS would ideally be arranged, so a user could move between the sections going left and right and then scroll inside that section by scrolling up and down. http://driz.co.uk/ipad/plan.png
Can anyone help me get this working? THANKS LOADS!
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#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 */
}
I am not entirely sure with the divs, sorry. Hope this helps.