How to make a webpage the size of the client device screen, and make it insensitive to the browser viewport size, in a simple and cross-browser way ?
with flexible divs the size of the container the size of the device screen.
thanks
This is pretty easy to find with a quick search...
You'll need javascript and use the screen object
Specification
Duplicate Question
Related
I'm having a problem with a website I've built: whenever I view the site on a smaller monitor or when I resize the browser window, the content gets covered by the other divs. I need the content to be fully visible, no matter what size the browser is.
http://sophisticateddesign.nl/cfreport/overons.html
Also, on the homepage the text gets cut off a little bit on the bottom row when I resize the browser. I need this row to increase in height a bit, which apparently can't be achieved by simply increasing the divs' height.
http://sophisticateddesign.nl/cfreport/index.html
You should take a look at responsive web design. By using a fluid grid together with one or many media queries you can achieve what you're asking for.
Here's a good introduction if you'd like to get started. I can also highly recommend Ethan Marcotte's book about the subject!
The simplest way is not to define widths in pixels but using only width in %. You defined for example width: 960px; for <html> so if the browser window is less than 960px the whole content of this site won't be visible. You also defined the footer width and probably some more elements.
But the true is nowadays you should learn rather Responsive Web Design to create your page adjusting to device width. Many sites are being used by people on PC, laptops, tablets and mobile phones and you cannot create complex site to look nice on all those devices without using responsive design techniques.
I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen.
So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width in css and have zoomed in/out as needed by device itself?
I apologize if the question is too generic, will explain details if needed.
EDIT:
So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for widths, fonts sizes etc is that right?
If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.
Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.
So I tried to set <meta name="viewport" content="width=640"> and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.
I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).
Would love to know your thoughts and I appreciate all the answers so far.
This is called Responsive Web Design when a website adjusts according to screen size...
You can make this kind of responsive website easily through CSS3 Media Queries:
How to write CSS Media Queries for common types of devices
Responsive Web Design: What It is and How to Use It
If you google for Responsive Web Design you will find lots more information on this topic. It's really an amazing method to make your website look great on all devices from small to large screens.
We have a series of tutorials on creating web pages using responsive web design. If you want a quick introduction to it checkout Introduction: Creating a Responsive Web Design, it lists common mobile phone and tablet sizes, so it might lead you to the answer you need. You can find the link to our tutorial series in the article. The solutions provided use Bootstrap in order to provide easy to create pages. And it also provides free samples of responsive web design pages.
I hope this helps to provide the answer that you need, if not, then please let us know if we can provide any further assistance.
Regards,
Arnel C.
InMotion Hosting Community Support Team
Specify the width in percentage say width=100%,which automatically adjusts the width with the screen.
I'm working on Windows Store application basically developped for screen resolution 1366x768.
But for anothers resolutions I want to provide proportional adapting when all content is shown on the screen in the same proportions like it would be shown on the defined screen resolution (in my case 1366x768).
Is it possible to provide something like static resolution for application or may there is another ways to reach this?
Try using a ViewBox and set the child element to 1366 width, 768 height. The contents should scale proportionally to whatever resolution the user's device is.
Viewbox will use letterboxing (or empty space) on the sides / top & bottom if necessary. Multiple resolution issue.
Better approach will be to use Adaptive layout. Guidelines for scaling to screens
Sample implementation using Grid control can be found at Multi-resolution apps for Windows Phone 8
Im looking for some options regarding scaling some HTML elements for use on a large screen (like a kiosk). I'm currently using CSS3 scale() to get a relatively cross-browser scale (thanks to cssplease), but seeing if anyone else has any better suggestion.
Primarily, I'm looking at rendering widgets (HTML, js, and images) on a large scale (from 400x200px to 800x500 for example). While I could rewrite each widget for a larger scale, I thought I'd check my options.
Is there something that SVG can do, or canvas? CSS3 scale() is okay, but images need to be replaced with high-res versions. Text spacing seems to also be slightly off.
Thanks!
CSS3 Transforms are still the best option for what I want, especially for browser performance.
Not sure if Understood you right, but if you need your website, images, videos etc to look good on any screen (with any resolution) you could try to go for responsive design. You have option of using css media queries to adjust website for different screen resolutions, it will also maintain original image quality etc.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
I found them very help full and once you get into it you would easily build scalable websites ;))
This may be an extensive retrofit but you might be able to define your elements' dimensions using ems then use media queries to increase the base font size for different screen sizes. So if your base font size is 16px, you main column might be 47em, sidebar 12em, for an approximate site width of 1000px. You could then use media queries to detect a larger browser and all you need to do is increase the base font size to 20px and viola your site is now 25% bigger.
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.