I would like to use the 'zoom' property to make bigger the content of the page for the mobile devices with high DPI. I know that the firefox doesn't support it. But If it works good for safari and chrome is ok for me.
I saw some recommendations not to use it.
Should I use zoom property?
Zoom is a non-standard method of scaling content
https://caniuse.com/#search=zoom
Check media queries to change size of an element for mobile
https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Related
On my webpage, I use images that are 720px by 480px. If I look at them in Firefox or IE (latest version) however they look scaled up, they are considerably larger on the screen than their original version in Lightroom. If I look at the dimensions of the picture on the web though, it says that it is 720x480. If I want the files to be as big as they should be, then I have to set the width-property to 600px, which I think is odd..
The webpage uses Bootstrap 3.3.4.
There may be styles being applied by Bootstrap or something else, which are causing the issue. If you look in the inspector of your browser, it will show you all of the rules that apply to a given element. Also, your browser may be zoomed. The shortcut to reset it to default is usually Ctrl-0, though there is also usually also an option listed in the menus.
Im practicing how to create a responsive website using bootstrap. Everything was fine when i tested my site on Firefox and Chrome using the Resizer extension but when i tried to view it on Safari theres a very small but obvious discrepancy with the bottom padding in one of the boxes(the purple one with the greater than sign). Ill attached the pictures to show what i mean.
Firefox view using Resizer Extension
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52435PM_zps8da019a9.png
Safari view using Developer tools
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52455PM_zps587313c1.png
Is there any Safari Mobile specific CSS?? what should i do? help!
i heard stories that w3cSchool isn't the best resource (due to inaccuracies) but i feel this may be of some use to you. it seems that the image is being cropped but take a look at this and see your own CSS3 code to identify the issues, you may also have to consider using relative positioning as opposed to absolute.
http://www.w3schools.com/cssref/css3_browsersupport.asp
also, take into consideration that while some browsers may seem to "now" support the features of CSS3, you need to also check for to version compatibilities. You can set up your site to use specific CSS3 features depending on the versions.
I want design some layout in which , has defined min-width - is it safe?
Can I use #media (max-width) to define different , min-width on different devices?
I am focusing on modern browsers Chrome, Fire Fox, Safari, Windows 8 IE - computers, tablers, smartphones (Android, iOS)?
Are you are serving a separate mobile site or styling an existing desktop version with media queries? For the former use Chrome inspector to set the user agent to emulate the most common Android phones. For the latter use max-width and/or device-pixel ratios for your displays. It is essential to get the breakpoints right for the mobile display or your layout will collapse.
See CSS tricks to get a good starting point
Dont use a min or max width on a body, just use a wrapper div around the content and a header div around the header and navigation.( if you have the navigation like a stip under the header)
While searching for an easy way to make my menu (http://www.ck-game.com/newIndex.html) fit screen size I stumbled over the possibility of using the browser's zoom functionalities (zoom, moz-zoom, etc.). I could imagine that it's much easier than using "em", "%" and media queries to make an elastic layout, more so because I have background-images which need to keep aspect ratio. Is there anything that speaks against using it besides someone wanting to actually zoom in/out and then the menu would adjust to it?
EDIT:
Proof of concept: http://www.ck-game.com/newIndex.html
Please try with different viewports and see how well it adapts :) Tested in IE9, latest FF and latest Chrome. Works on Android devices, breaks on most iOS devices.
When designing the UI for a web application, what are the things to look out for to ensure the UI doesn't break when someone zooms in or out with their web browser?
Also, how do the different browser zoom types play into this (i.e. I know IE6 zooms differently than Chrome, and I assume mobile browsers are different from that too)?
Most modern web browsers use proper zooming. By this I mean that the page zooms in an out as you'd expect if you were using a lense to zoom in and out.
IE6 and some older versions of Firefox etc use text increasing rather than proper zooming. For those browsers, the unit type you use to size your elements will change how the zoom affects the look of your site.
For example, in IE6, setting widths/heights in px will result in a fixed layout that once zoomed, only changes the size of the text and not the containers themselves. Setting these same elements to use % or em then allows the elements to resize.
With regard to "what do I look out for" I think it depends on what browsers you're wanting to support. My own preference is to develop for modern browsers. If an IE6 user wants to zoom and it breaks the layout then I'm happy to live with that.