I have had a problem with css for a couple of days and I found a temporary solution, however, I am not sure if it is good. I am writing a phone app and am using 'vh' and 'vw' as screen measurements (so the style is okay according to different screen sizes). The problem I am facing comes when I click on an input and the keyboard pops up. Then the screen size decreases, and all the elements that I have with bottom: 10vh ( or any number of vh ), get pushed down, because the bottom decreases to the current screen size. I solved this by using px instead of vh, since it is independent of the screen size, but could cause problems (because users can use different screen sizes, so the style would look different on different phones). So both methods have cons. What is a good solution to this? Thanks.
Sometimes it isn't worthy to use 'vh' or 'vw'. as an example when you rotate your gadget also some styles get corrupted. when you use that take care of any size in width or height.
Use JQuery method,
$( window ).resize(function() {
//function call which changes the sizes according to window.width() and window.height()
});
It should do the job
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
Is there an automated way to scale height and width of elements defined in CSS based on screen sizes?
These days there are so many different screen sizes in the market, it is quite onerous to create separate CSS for each. Wondering if a same CSS can be used with an automatic scaling based on screen size. Say for example, the original CSS is built for 1200x800 screen size. If the page is opened on an screen half of this size, all css element in which height and width is defined in pixels, should automatically reduce to half. I understand it will not look good when the page is opened in a very small screen because everything will look tiny. However, the requirement basically is to automatically adjust the app screen to laptop, desktop and tablet screens.
For example, I have a div and inside that div there are 5 buttons (created using CSS). On smaller screens the button row wraps into two lines making it look very bad. This is just an example. Most other screen elements behave similarly.
As commented and approved by OP :
You have multiple approaches available, among them media-queries (million links around but here's one : http://css-tricks.com/logic-in-media-queries) and another one I like a lot, viewport units (see here for example : http://css-tricks.com/the-lengths-of-css Viewport Percentage Lengths). You are basically describing what is called Responsive Design (http://en.wikipedia.org/wiki/Responsive_web_design) --- Have Fun ^^
Maybe try this for responsive design without css 3 : http://responsejs.com
Media-queries are the way to go. As for the old browsers(IE <10), this is a great webpage with "polyfills" for those:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
I am designing html/css interface for a 1920x1080 touchscreen. It will always be that resolution, never changing. Should I set width and height to those dimensions and code from there, or should I code in percents at whatever size resolution I'm at and then allow it to adjust to a bigger screen? I am looking for the solution what poses the least roadblocks.
Never assume that anything will always be the same resolution. Regardless of what you're coding for now, there will be next generation devices, and they will be different. So unless your project has a very short lifetime (maybe a temporary web site), my recommendation is to code to current standards. Also, in my experience, coding in ems and percentages is usually faster than coding in individual pixels of a project. If your touchscreen is 1920x1080, and you set a body width of 100%, there is functionally no difference between that value, and setting the body width to 1920px. However, using the percentage approach, you retain more flexibility should the device resolution or browser behavior change.
The best solution (atleast for me) has been described by you as the usage of percentage values.
So if you use percentage values then the code will take care of its content's size in any screen size. But you might want to use this:
#media only screen and (max-width: 1900) {
// css properties here..
}
But the media query will take alot of code lines to make the site able to render itself. So that is why using % is my preference.
I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.
Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.
If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?
Thanks for any advice!
The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").
In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.
It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.
Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.
% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.
It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.
For example.
Your website header have the width of 950px; But in a mobile device, it may fit at 450px;
So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;
But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.
Diana,
I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.
Check out the below:
http://www.noxinnovations.com/portfolio/responsive/
Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!
Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.
In my opinion, I should probably have a Media Query for a larger screen.
I hope this helps you as much as it has helped me!
Thank you,
Aaron
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .