I am creating a responsive website/hybrid app and im starting to discover lot of new information regarding CSS3.
While going through media-queries, i found that we can detect the so many properties of browser as follows :
min-device-width
max-device-width
min-device-height
max-device-height
orientation:portrait
orientation:landscape
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio
and many more...
So my question is :
1. Is the screen resolution the same as the device-width obtained..?
2. If not, Can i target the browser resolution using css3?
Thanks
Roy
device-width
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
width
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
source
Related
EDIT: Because I maybe wasn't clear enough. I'd like to point out I'm NOT searching for "how to use viewport". I'd like to know how that actually works on background. How is the actual number of the viewport width computed on mobile device etc.
For example my smartphone has the smaller size 1080px but it returns 414 instead. Actually not just the viewport, also simple $(window).width() returns only 414. Please read the rest I wrote before those two paragraphs. Thank you.
I also changed the title to somewhat more explicit, but you still need the read the rest. Thank you.
I'm getting familiar with using the viewport, yet I still can't see how it actually works on background. If you read viewport dimension on smartphone with HD resolution, browser returns you viewport width way under 1920 or 1080 which is the actual phone's screen resolution.
1) How does the browser come up with those numbers? Is it detecting mobile device at general or mobile device is giving the browser actual screen size (real-life screen size)?
2) How does the browser differs between smartphone and much bigger tablet, if they both have the same resolution?
3) Media queries and other stuff relies on certain breakpoints. Those are actually hard written values in every responsive design. Usually something like 480 and 768px. Is that something I can also rely to be constant? No matter how far will the screen resolution go up on smartphones in the future? I mean like 4k on 5" screen.
4) How does PC screen fits to all this? Browser doesn't detect mobile device? or machine won't give it actual screen size? How does it know it just should use the pixels as pixels (minus scrollbars etc.)?
#Saix,
Have you searched out what you actually want? You will get your answer on first search.
Here, HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages or a common Header file under the <head> tag.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Is there any way to get the window aspect ratio in a css media query? I have found the device-aspect-ratio, and device-pixel-ratio, but it seems that it is all possible to get several breakpoints based on pixel size and number of pixels and also device width. Is it not simpler to make website relative to the browser window because the browser window spans over the whole device on mobile phones (for now) but on PC you can resize your window to your wishes?
So is there any workaround or do I need to do some server/client side programming?
Thank you enigma. English is not my first language.
Heho people,
what again are the drawbacks of using the device-width-media-queries?
The background of my quest is:
--> a websiteB I control and which has to be responsive
--> in an iframe of 100% width and height
--> on a webpageA with possibly NO viewport-meta-tag
Therefore on mobile, the mobile browser renders webpageA without a viewport-meta-tag, i.e. it will be big. So the iframe getting big values for it's own responsiveness and my webpageBs normal width-media-query (which is recommended so many times) is not triggering, because it needs small values . . .
Nonetheless the device-width-media-query is getting the right values, so why not using it?
A device's width has nothing to do with a device's viewport which is what the browser will be using. Usually in mobile devices the viewport is actually bigger then shrunken down into the device's width.
Targeting anything for a media query other than the actual wrapping body (i.e. the viewport) of the document is just asking for issue in design later.
As to the browser rendering without a viewport I think you may have your terminology off and may I ask what you are building with an iframe? Unless app software specific frames are generally discouraged from structural mark up usage.
It seems that video element sizing behavior is different between mobile to desktop:
on http://www.quirksmode.org/html5/tests/video.html
on desktop chrome its width is about 35% of the browser. on ipad chrome is about 10%
any ideas why? where can i get the rules to this?
thanks much
Lior
Apple documents this non-standard behavior in this document, which is worth reading because it covers some other things you're going to have to worry about with video on the iPad.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
Default Height and Width on iOS
Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iOS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iOS, especially on iPad, where the video plays in the allocated space.
Also, have a look at this related question:
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.