I was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")
<link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />
There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.
This is especially helpful for targeting Android Tablets which comes in different sizes.
See this useful tutorial for further explanation:
http://css-tricks.com/resolution-specific-stylesheets/
So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.
Then you'll add several stylesheets:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)" href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
etc.
So iPhones would use the small.css, and tablets larger than 700px will use medium.css.
Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Related
Our designer was testing a responsive site on his 4k monitor. One of the breakpoints is as follows:
<link rel="stylesheet" media="all and (min-width: 1000px)" href="/css/desktop.css" type="text/css" />
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999px)" href="/css/tablet.css" type="text/css" />
Simple enough. He managed to find a point in between 999 and 1000 pixels where the CSS broke and the page went out of whack. After some serious head-scratching, this fixed the issue:
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999.9px)" href="/css/tablet.css" type="text/css" />
I couldn't find anything about using fractional pixels in media queries when I Googled it. Is it even a thing? Is this the best way to do it, or is there a better alternative?
It seems like it did come up for Chromium as a bug but was marked fixed and thus should not be possible: https://bugs.chromium.org/p/chromium/issues/detail?id=689096
In this old thread about a bug in Firefox they are speaking about the same issue, although this is not marked fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1120090
In that thread the fractional pixels in media queries are mentioned like they would be a normal thing.
I do web development on a high DPI screen for 7 years now and this has not happened to me yet. I would say it's not really a thing. One way to avoid it completely would be designing from the biggest or smallest screen upwards (or downwards), just overwriting and thus exclusively using min-width or max-width.
I am currently working on a new responsive website with several breakpoints. Between those breakpoints the layout should be flexible to always display as nice as possible on every device.
If a user views the page with a classic desktop browser i want to force the desktop version of the page and prevent the responsiveness.
Reason why is the lack of responsive ads which currently exist in germany.
Anyone has a clue for me how to achieve it?
You should use max-device-width rather than max-width, which targets the viewport size rather than the device screen size.
#media only screen and (min-device-width : 1024px) {
/* Styles */
}
You can also target retina displays:
#media only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Edit: See this SO thread for more info.
Start by having two stylesheets. One responsive and one non-responsive. If it's a desktop user then load the non responsive and vise versa for mobile users
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
So I'm using an #media query to use a different css file on the mobile version of my site. Here's the head of my html:
<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />
<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />
However, I'm finding that the mobile css just 'adds' to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won't just give me some unformatted web content with a red background, but will render the desktop css with a red background.
I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don't want to have to manually undo the many tweaks I've done to make the site nice for desktop. In particular, I'd like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.
Any thoughts?
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
Wrap your desktop css in a media query that targets desktops
Use your media queries in a conditional fashion like this:
#media screen and (max-width: 800px) {
<link to mobile stylesheet
}
#media screean and (min-width: 801px) {
<link to full stylesheet
}
Note that all platforms will use "#media screen", so you cannot do reliable device detection with the media type alone. Most commonly you will use the device-width to help you make educated guesses at what type of device the client will be.
Devices with high DPI are usually pretending they are smaller, so both the iPhone 3GS and the iPhone 4 (for example) can be matched with the same set of queries.
Whether you link "only screen and (max-device-width: 800px)" or build into your css " #media #..."
You need to envelope the "desktop" styles in order for the mobile to not recognize them at all.
so basically
only screen and (max-device-width: 800px) - for your mobile devices
and
only screen and (min-width: 801px) - for desktops
If you're putting your mobile stuff last, then you could add a CSS reset to the top of your mobile stylesheet.
My customers' website works fine in all major web browsers. Except for the iPad. Some things render a little bit differently.
I'm using the following conditional stylesheet
<link href="{$SkinDir}/ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 1024px)" >
It now fixes the iPads' stylesheet problem that I had....
BUT
The site worked fine on other devices such as my HTC Phone. But now that the iPad stylesheet has been loaded, it is now reverting to that stylesheet.
I tried using :
<link href="{$SkinDir}/phones.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 600px)" >
But it hasnt seem to have cascaded to the phone handset at all, It is still referring to the ipad stylesheet.
Is there any way at all, I can just target the iPad!?
It is worth noting that the site is running on a SMARTY Templating engine. The file that relates to the conditional stuff can be found here
Many Thanks in advance.
Do the conditional css < link > on the server level (php), rather than the client level.
you can use this http://shaunmackey.com/articles/mobile/php-auto-bowser-detection/ to detect the iPad and set a flag so you know which css to include.
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.