I'm not an expert on CSS but based on what I've read, this is how min-width and min-height work in media queries.
Min width is the current width based on the current orientation of the device. Say, for instance, I had a device supporting 320x480 resolution, in portrait mode the width would be 320 and the height 480 - and in landscape mode the width would be 480 and the height 320.
I'm trying to find out if the same applies to device width and height - or whether is it fixed in relation to the device. In other words, if the device height in portait mode is 480, and I flip the phone the device height is still 480.
The reason, I'm considering using device parameters for some media queries instead of standard min/max is because the position can change if the keyboard is opened - so I'm looking for a permanent height as opposed to the fluctuating height of the viewport.
I'm struggling to find this answer and would appreciate any advice - also would like to know if there are any anomalies when using these queries.
Yes, max-width behaved the same as min-width. When you rotate the device you will get a new max-width.
So your max-width will be larger in landscape than in portrate.
The same logic applies to max-height.
Related
This question already has answers here:
Max-Width vs. Min-Width
(7 answers)
Closed 10 months ago.
I used the #media (min-width:320px) and noticed my design from mobile scaling back to desktop had inherited my mobile design. changed to max-width and my desktop design was restored but only this time my mobile design is all messed up again like it was before I made all of my adjustments using the #media (min-width:320px)
what am I doing wrong?
I think you need to read more and understand better these 3 things to find out what you need. Media queries are a popular technique for delivering a tailored style sheet to different devices (from: https://www.w3schools.com/css/css3_mediaqueries_ex.asp).
max-width
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change the height of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.
Further read: https://www.w3schools.com/cssref/pr_dim_max-width.asp
min-width
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be applied.
If the content is larger than the minimum width, the min-width property has no effect.
Note: This prevents the value of the width property from becoming smaller than the min-width.
Further read: https://www.w3schools.com/cssref/pr_dim_min-width.asp
Best Practice
Of course by changing min-width to max-width in media queries, or vice versa. It would change the layout it should be. We need to be more persistent on what we need the media query to handle the style. We should decide, only use min-width, or only use max-width. Don't use both or the frontend developer will be going insane on something hard to solve when the frontend styling bug comes.
Useful Link(s)
Max-Width vs. Min-Width
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.
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 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
I'm wondering if the max-width of a media query is relates to the view port size or the windows size?
for example , I have this media query:
#media screen and (max-width: 360px){}
will this media query be in action when the view port size is 360px or the windows size 360px?
It's the viewport. This is stated in the spec:
The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).
This also applies to sub-viewports within the main browser viewport, such as those of framesets and iframes. So if an iframe has a width of 360px or less, your media query will also apply within that iframe.