Can some one explain to me what the orientation media feature does in layman's terms?
It's mainly for mobile devices like a phone. You can control the style based on whether the device is being held upright, or sideways ...
#media all and (orientation:portrait)
{
/* Your CSS here */
}
#media all and (orientation:landscape)
{
/* Your CSS here */
}
Assuming you are asking about the media attribute in the link tag please find the answer below.
Media is to tell the browser or the device to pick the right stylesheet for that particular device or an action.
Eg. if a style sheet is linked with media as Print the stylesheet will work only when the page is been printed. This way you can minimise the graphic and media involved in the page for print purposes.
in simple terms it is a if conditions for stylesheet.
you have the following media types.
Screen - obviously computer browser screen.
ttv - teletype
tv- television
projection - projectors
handheld - small screen handheld devices
print - for printer
braille - Braille feedback devices
aural - Speech synths
all - picks the same stylesheets for all the above.
Hope this helps...
Related
I keep seeing tons of examples of media queries that look like this:
#media screen and (min-width: 700px) and (orientation: landscape)
or
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
Now, I understand HOW keywords like "screen" and "print" and "speech" are used, but I don't get the point. Maybe using "print" for some changes to save ink (though I imagine that's an edge case since backgrounds don't print by default), but why would you ever need to specify "speech"? Why do examples of media queries so often specify "screen"?
This specification from W3C suggest that media queries could also be used for HTML, XHTML, XML. Perhaps, queries with speech media type were mainly used for importing text to speech software into varieties of document types.
This is the only source that I could find describing the speech media type But it does not really provide a great example of how it is used.
As for why the examples often used screen media type, simply because it is the most often used. Previous versions of media queries had many media types, but are now removed as they have few uses or serve the same purpose with the current media types.
In the future, they may alter their specification, removing those not very useful media types or adding more of it to suit future technologies.
Update: I found a GitHub thread discussing about speech media type. It basically says that speech is mainly for user agent that deals with speech. E.g. Siri or Alexa.
CSS Syntax
#media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}
meaning of the not, only and and keywords:
not: The not keyword reverts the meaning of an entire media query.
only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.
and: The and keyword combines a media feature with a media type or other media features.
They are all optional. However, if you use not or only, you must also specify a media type.
Media Types
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
I want to exclude iPads from using my CSS styling for desktop views on my website. I built my site mobile-first, so the desktop styles are in a media query.
While messing around with my code I tried this:
/*mobile and default styles (the styles I want the iPads to use)*/
#media (min-width: 750px;),
#media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/ {
/*desktop styles (the styles I don't want the iPad to use)*/
/*in this code, these styles are currently being ignored by iPads*/
}
I don't think this is valid code but it works correctly in every browser and device I have tested.
It has to do with having two #media lines on one media query. The second set of parameters are somehow excluded from the query, but I don't understand why. Without the second #media then it works like an or operator and the desktop styling will show up on an iPad.
I have tried nesting media queries, which doesn't seem to work, and I have tried using not, but the first line will still be true and thus it work work either.
I haven't found any information about using #media twice in a statement and having it somehow exclude the second media query, could someone explain the correct way to do this, or at least explain why this works?
Brilliant - yet incorrect syntax according to VS12.
Can be seen working here http://www.stilborg.com on iPad.
I'm developing a web app for feature phones in Africa (non- smartphones whose screen size is usually 128 x 160 px (1.80")).
I need to learn how to make the website responsive, or display properly for a screen size so small. I'm aware that regular CSS queries dont work well for feature phones, so any other suggestions?
This:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=en
is something I read on the topic, but it's vague for me to understand what changes to make in my CSS file (which is using bootstrap at the moment) Will really appreciate your help!
To make a website responsive we have to use CSS3 #media queries. Write #media queries for different screen sizes. But #media queries doesn't support for older version browsers. In your case (non-smartphone) #media doesn't work. I suggest create a sub domain for mobile phones like http://m.website.com and use javascript to redirect to mobile version site if user opens http://website.com .
#media only screen
and (min-device-width: 128px)
and (max-device-width: 160px)
{
/* Put your CSS Code for small screen */
}
Some useful articals about #media .
http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531
http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html
https://css-tricks.com/logic-in-media-queries/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can either try things like foundation which you can use pre-made tables, and sections with pre-defined css properties:
http://www.foundation.zurb.com/
Or you can use percentages, width: 15%. So it will get the designated percentage of your device and calculate the correct size based on that.
Also what your listed site is saying(google), it creates different css files based on your device. So when you use <link> to set your CSS file you can make it so certain devices use certain files:
(Taken from Google):
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
Okay, let me be specific: I do NOT want to base this on screen size because new mobile devices with bigger and better viewports are coming out all the time. Also, I am quite reticent to use JavaScript to detect this because many mobile devices still fail to support it (Yes, I'm looking at you, iOS Safari & Opera Mini)
It seems obvious to me that CSS3 media queries ought to have a parameter that detects whether the media being used is a cell phone, tablet, or PC. Does anyone know what that might be?
The reason I ask is that while converting my site to Google's mandated RWD, I want to use CSS to show a button that just calls my business from mobile phones, but a button that links to a "Contact us" page on PCs. And as a theoretical purist / mathemagician, I don't want to have to serve different mobile site pages than PC pages. I want it all unified under the Godhead of RWD thru pure CSS.
Thank-you so much for humoring my perfectionism and contributing as able.
:)
Debbie
There's no direct CSS-only way to detect if a device can place calls. However, more often than not, these devices are held in an upright position, so you could possibly target them with an orientation:portrait media query. Just keep in mind that this approach could produce some false positives with some tablets or other devices, so you should probably add a width restriction too. Here's what might work for you:
#media only screen and (orientation: portrait) and (max-width: 479px){
/* place your css here */
}
Here's a handy CSS3 media query guide: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
This may generate some false positives and false negatives. In general phones have touche screen pointer: coarse and does not have the hover: none capability. Some tablets can't make calls but it will be detected here, and you can use a mouse with your phone if it supported and that will make it undetected as a phone.
<html>
<meta charset="utf8">
<head>
<style>
#media (hover: none) and (pointer: coarse) {
.has-phone {
display: block;
}
.has-no-phone {
display: none;
}
}
#media (hover: hover) and (pointer: fine) {
.has-phone {
display: none;
}
.has-no-phone {
display: block;
}
}
</style>
</head>
<body>
Call US
Contact US
</body>
</html>
Unfortunately, no. There's no media query value to be able to detect whether a device can make calls or not and, even if there was, it probably wouldn't always be accurate or would give you unintended side effects. For instance, my desktop browser can make calls via Google Voice, but if clicking on contact launched GV to make a call I would curse you to the ends of the Earth.
Using handheld doesn't work because not all phones identify themselves as handhelds (in fact most id as screen), and some tablets could as well.
Ultimately, if the two click options are a must and javascript is a must not, your best bet for the most accurate (though as you note, not 100% accurate) selection of phone vs other is to use a size query.
All of this being said, I think that if you investigate further, you'll probably find a design solution that can accommodate both use cases in an elegant way. One button that is used differently in different contexts is likely to be frustrating - particularly for users who visit the site on different media and are expecting consistency.
Sometimes, when I load a page on the Internet on my phone or tablet, it does not look right. Is it possible to inject custom CSS into a page on these devices?
UPDATE:
I am the developer of the site, but it would be cool to change the site without login and to add it to the browser. So only I can see it and I do not have to login.
Browser plugin would not be sufficient. The idea is to add pieces of CSS inside a "webview" on the iphone/ipad for a specific page.
If I understand your question well, you want to create mobile-specific CSS to fix your website's viewing, is that right?
If so, you can use CSS's media queries for so, like this:
#media only screen
and (min-device-width : xxx px)
and (max-device-width : xxx px)
and (orientation : landscape or portrait)
and (min-resolution: xxx dpi){
// your css goes here
}
Here are some links that might help you:
http://help.campaignmonitor.com/topic.aspx?t=164
How to apply different CSS for mobile devices not just based on media width/height
http://css-tricks.com/snippets/css/retina-display-media-query/