Should we think about CSS media other than screen and print? http://www.w3.org/TR/CSS2/media.html#media-types
all
Suitable for all devices.
braille
Intended for braille tactile feedback devices.
embossed
Intended for paged braille printers.
handheld
Intended for handheld devices (typically small screen, limited bandwidth).
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
is there any practical benefit for other media items? or all others ( other than Screen and Print")
what are benefits to use other media types?
Well, if you support accessibility devices, speech and braille can be very useful very quickly. The majority of sites don't support these; you'd perhaps be better served by making an alternative text-only site that could display well in lynx, for example.
For the average web developer, screen and print are probably the only ones to worry about.
Even the iPhone ignores the handheld media type:
iPhone OS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone OS.
Source: Optimizing for Safari on iPhone
Most of the other media types target users with disabilities. Those users typically will have some kind of assistive technology for their computers (like a screen reader or magnifier), and it's really hard to know which ones they might be using and if they would also support the alternate stylesheets. Unless you're targeting these users specifically (and know what kinds of technologies they are using), it's probably better to stick with the de-facto standards.
It depends on the audience you are targeting.
In general screen and print are sufficient.
Mobile devices using CSS3 media queries and "handheld" :)
I like the idea of being able to provide a viable alternative to mobile users; smartphone users (media queries related to screen size filter these) deserve attention as a rule.
Focus on information structure and content design become more important with the difference between the different representations.
I wonder to what extent "print" really is a good idea: should we encourage people to print content from the web? I can see the validity of this in a few cases, but not as a general rule.
If you are trying to build a highly accessible web site, it might be worth it to implement media types that aren't commonly used in order to potentially support future devices.
Presentation media would be pretty cool if it was supported, though. tv is supposed to be supported by devices like Boxee or the PS3, but the only one I've ever heard of supporting it is the Wii.
For 99% of the cases, don't waste your time.
Related
I (like the rest of the world) use media queries to help with responsive design. As such, I am usually focused on writing a #media screen query.
But I am wondering - do I need to take screen readers (or even printers?) into consideration when using media queries for responsive design? I.e., are there situations where I would need to use #media speech in responsive design? If so, how.
And responsive design is irrelevant to speech readers, then when would I need to use a media query for a speech reader?
Based on the comments in the issue [mediaqueries-4 ] Deprecate 'speech' media type as well? there is currently neither a clear use-case nor any notable support for speech.
So based on that you currently don’t need to care about the speech media type.
The print media query on the other can be useful depending on what information your site provides, and if you want to hide e.g. the navigation of the website and include some contact information on the bottom of the site. Or change the font-family to a serife one that is easier to read when printed.
I use a tablet for all my schoolwork because I don't have a good computer, but websites often come up in mobile device format. Is there a way to set my browser to tell websites that it is a computer, and not a tablet? If it were possible, would this cause any other problems, like disabling the touchscreen, or anything like that?
There's a couple different ways to tell if you're using a tablet. Typically it's either by:
screen size (noting the typical width/height ratios of devices) and then styling by media query
the window.navigator object in the browser is aware of a handful of useful info, such as OS and browser details
Each site will determine this differently so I wouldn't be confident there's a catch-all solution to this one...that being said sometimes landscape will get desktop styling if the devs used the sizing method ¯_(ツ)_/¯
I have been looking into media queries, but so far all the examples I can find on google and Stack Overflow have been to use specific sizes (max-width, max-device-width, etc.) The problem with this is that it doesn't give me the flexibility I need. I want to be able to deliver a ** specifically tailored** experience to desktops and tablets.
The reason I want to do this is that interacting with a tablet is different than interacting with a small computer monitor. An iPad in landscape orientation is 1024x768, which also happens to be a common computer monitor size. The difference however is that on a computer, pointing to small controls with a mouse is easy, but it is very difficult to tap the same size controls on an iPad, especially for someone with large or clumsy fingers.
How can I deliver a tailored experience to an iPad user vs a desktop user with a monitor of the same size? I'd like the desktop experience to not be forced to use jumbo sized buttons that a touch experience requires.
Is this possible with media queries, or something else? I see that there's a "handheld" option for media queries, but I've read that most small device browsers ignore this.
It's not possible with media queries. There is a "handheld" media type, but most, if not all modern handheld devices identify themselves as "screen".
To do it with javascript, see this question:
What's the best way to detect a 'touch screen' device using JavaScript?
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
The iPhone 4's Retina display is double the density of of the iPhone 3, but Apple handled it fairly nicely but just making an assumption and doubling the pixels when rendering (so that your web page looks the same physical size on each device). You can then use some webkit media queries to load additional CSS just for that device (-webkit-min-device-pixel-ratio:2).
The question: Is there a resource that a) lists the other mobile devices that are now using high PPI screens b) what the device does by default in terms of rendering web sites and c) if it supports the webkit check and/or it's own custom detection method?
If not, perhaps this post could become that resource (CW) by posting info on specific devices as answers. I have to start dealing with BlackBerry and Nokia devices that are using the high res screens (and Android coming along). Any data appreciated!
UPDATE:
After some testing, I'm finding that there really aren't any other mobile devices that identify themselves as double-density as the iPhone 4 does. There are screens with much higher PPIs now (often on smaller devices) but the device doesn't in any way declare itself as high PPI. Perhaps a better way to explain it is that those devices just have 'really small pixels'.
As such, there really isn't a practical way to handle those devices given that ALL sites are rendered the same, so any attempt at modifying yours will likely interfere with the user's own preferences and settings.
If anyone knows of any devices other than the iPhone 4 that properly declare themselves as high PPI, let me now!
See here for a similar quesiton:
How to target iPhone 3GS AND iPhone 4 in one media query?
I asked it a few days back, I don't think there is a list of such things but if you know the devices you want to target it is not hard to find out and thus target these devices.
The best detection method is to use CSS3 #media queries, and given that Opera is the most popular mobile browser it is a safe assumption to use the webkit extension along side the #media queries.