Is it a good idea to use CSS' zoom property for responsiveness instead of manually resizing every element on the webpage in certain screen sizes? This will obviously not work on mobile because it's a whole different layout but it would work for smaller desktop screens. Are there any drawbacks to this (other than Firefox lacking support for the zoom property)?
For example -
#media (min-width: 1024px) and (max-width: 1279px) {
body {
zoom: 80%;
}
}
Thanks a lot for your time, have a nice day! ✌️
I think, it bad idea, because this property do not supported in all browser
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
I have this code on my site to hide content when in desktop view:
#media only screen and (min-width: 767px), only screen and (min-device-width: 767px) {
.hide-desktop {
display:none!important;
}
}
But for some reason its hiding when I'm on mobile and in developer tools it shows when I remove the class. It seemed to work fine in the past with other things I've done but for this.
Remove !important, as it can cause other CSS properties to misbehave from the usual flow and makes it hard to detect any sort of bugs.
Then,
Check in developer tools that rather any other CSS property is overwriting it.
If none of the above is working for you, post your whole HTML and CSS so we can help further.
I recently asked a question about resolution and how I can fix it in my ASP.NET web application.
With some of the answers I got I found that media queries was a good place to go.
I have set up my CSS document like the following:
#media only screen and (max-width: 640px) {
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
}
#media only screen and (min-width: 801px) and (max-width: 1024px) {
}
#media only screen and (min-width: 1025px) {
}
I have been developing in 1600x800 and I am wondering how do I know what I need to change the sizes of the object to. Do I have to develop the application again in a smaller browser or is there an easier way to go.
HTML:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
The approach is basically the same as when you are writing CSS without using media queries. You still have to deal with different window sizes.
Drag the window edge to make the browser smaller
Look at how the design holds up
Adjust the CSS
Refresh the page
You will need to change the sizes of your images and fonts and also change their positions based on the different screen sizes which you have set using the media queries. To check the different code you can resize your window and drag the border and see the effect if its working or not.
And also follow the steps which **#Quentin** has written it will help
this is not exactly the right approach to follow. you should start your website with a fluid css layout grid, google it a choose one that suits you. this is an example of a fluid grid: http://onepcssgrid.mattimling.com/.
When you set up everything and designed, stretch your browser and when the design "breaks", add a media query breakpoint. deciding your breakpoints before the development is not a good idea.
a good tool to test your design may be: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (enter your url in the top left box) but i usually prefer stretching my browser manually.
This is what I have done in my website and it is working fine:
<head>
<meta name="viewport" content="width=device-width">
<style>
#media screen and (max-width:1900px)
{
#content{
margin-left:251px;
margin-top: -197px;
}
}
#media screen and (min-width: 420px) and (max-width: 1000px) {
#sidebar {
margin-left: -30px;
}
#content{
margin-left:221px;
margin-top: -197px;
}
#separator
{
height: 50px;
}
}
</style>
</head>
I checked it by resizing my chrome window and then applied width accordingly. Hope it can help you.
CSS Media query are the best option to solve issue related to working with different size of browser and devices. you can check your application with different tools available that shows how your application look on different device and browser.
You can check by re-sizing your browser window or you can use browser extension to check your work
Google Chrome:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
FireFox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
To learn more about css media queries visit: http://letsdopractice.com/css-media-queries/
I have a webpage (html + css file). When it's shown in its native zoom it doesn't look good. I need to zoom-out (twice click ctrl+-) to get it look good.
Hence, I want this zoomed-out format become the native zoom of the site, namely, that people seeing my site will see it that way by default (on Firefox, Chrome and Internet Explorer).
Question: Is there a way to do this? What is the simplest way to do this?
(I don't really code well html/css. I used a free template to build my own site.)
Its because your CSS is not changing according to the resolution
so use media queries
http://mediaqueri.es/
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Use media queries to write different styles for different screen resolutions.
also, use ems and percentages for font-size widths, padding, margin etc.. so that when you zoom you page it gets changed relative to the parent as per resolution.
You can use #media query
#media (min-width: 700px) { ... }
#media (min-width: 700px) and (orientation: landscape) { ... }
#media tv and (min-width: 700px) and (orientation: landscape) { ... }
#media (min-width: 700px), handheld and (orientation: landscape) { ... }
Further more
You can also use window.resizeTo(iWidth, iHeight) method to resize your browser window.
This is a Trick that you can use in CSS, however remember that this will zoom out the HTML from the centre and mess up with the total alignment of you site.
However im sure if you play around a bit you may find this to your advantage.
CSS
html {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
overflow-x:scroll;
overflow-y:scroll;
}
WORKING FIDDLE
How could I implement web page segmentation(any type-Vision based/Layout based/Reappearance based)?? Any implemented examples or useful links?
Thanks in advance..
Simple way might be media queries:
<div class="content"></div>
Then in the css you set a standard style and override it if the screen is small. This is not only for mobile, if you re size your browser it will take affect but it will work on all small screen displays.
.content{width:400px;}
#media screen and (max-width: 400px){
.content {width:200px;}
}
There are other ways of course, but for a basic implementation this will do what you need.