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.
Related
I was under the impression, that the units vh and vw deal with mobile browser zooming in, but apparently that's not the case and I think I am beginning to understand why. Zooming in does not change the viewport at all, but merely shows the user only a part of the viewport, despite the name viewport. Basically there is a difference between what you can see and the viewport. I don't know if distinguishing those two really makes sense, but that's how it seems to be.
The question is: How else do I "react" in my stylesheet to zoom changes?
For example, I have some html element with a width and it fits on the screen of a mobile phone. Now the user zooms in (doing that two finger gesture, moving the fingers away from each other). The size of the element should stay the same relative to what the user sees, but text should get bigger, because it might be the reason why the user zooms in. Maybe they couldn't read it before or want a link to be bigger, so that they can click more easily on it.
How would I do such a thing?
I've read about #viewport stuff, but it's not really supported yet and also poses the question, when to use which viewport size, how to make it as fluent as when you use vh and vw on a destop browser? Simple limiting "up to so and so much px of width" won't do. Defining a mathematical function for how much the element changes its size relative to what one can see and how much the text size changes would be great, but is probably not possible to have.
On mobile devices, the text-size-adjust property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.
As this property is non-standard, it must be used prefixed: -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.
Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.
Its highly experimental though
I am constructing a responsive website, and have designed it to look correct for desktop view.
I am currently tweaking it now for responsive breakpoints/media queries.
Here's the problem that I would like guidance on:
From my understanding, I've seen people only use width for their break points. In which case I did the same thing and make it look good on all the width break points.
However, I happened to be testing using the google chrome developer tool and started selecting specific devices (iphone 5, iphone 6, iphone 6 plus, ipad, etc.)
And noticed something alarming, which was that the elements was getting pushed off the screen vertically at the top and bottom because each of these devices not only have different widths, but HEIGHTS as well.
So the perfectionist in my is thinking about setting a media query for both height and width for every major device, but I realize that this work, although can be done, might not be the most efficient, and I have not seen other tutorials do this.
My specific question is: if there is a more efficient way to developing a responsive site without having elements go off the screen vertically.
Added information: I have a div that contains an img, then a h1 below it, then a bootstrap row with col-sm-6
The img width is in px (I experimented with vh/vw and %, but that seemed to make it more difficult to control when it scaled)
You can not set media query for device height, You can set height only,
And do not depend only in google chrome developer tool because sometimes it will not response in proper way, so you have to test in actual device for batter view.
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
If I set my screen resolution to 1024 * 768, does that mean my website can be 1024 pixels wide?
If so then why does an image 1024 pixels wide cut off the page?
http://stevenportfolio.servehttp.com
If your screen resolution is 1024x768, that means that your screen is 1024 pixels wide. The available space for a web page is probably a little less, since scroll bars and window borders take up some space.
The short answer is no. A screen resolution of 1024 x 768 means that your screen is displaying 1024 pixels horizontally and 768 pixels vertically. When you view your web page, though, you aren't always using 100% of those pixels. For example, the scroll bar in your browser takes up some of those pixels or if the browser is not maximized then you may only have half of the screen.
You should never design a website that relies on the screen being a particular resolution for several reasons:
Not all your users have the same screen resolution
Even if you try to find the resolution with JavaScript or some similar hack, it may or may not be reported correctly (plus your website shouldn't require JavaScript to work)
The browser window may or may not be maximized
Try to come up with a design that is flexible enough to scale for any standard screen size and remember to test your site frequently on different screen sizes, browsers, operating systems, and resolutions. (You can use browsershots.org if you don't have multiple computers handy.)
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.