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
Related
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
I've set up a test with media queries to work like so:
#media only screen and (min-width: 650px) and (max-width: 700px) {
#global-wrapper-cp-fefc4ea514a255df2244eaccdabbb262 * {
background: red !important;
}
}
However, the CSS is effective from 666px to 716px:
My browser is at 100% zoom, so it cannot be this. I am using Chrome extension "Browser Width".
I'm hoping this is something simple that will leave me red faced. Can anybody offer any advice? Thank you.
You have to test it inside responsive view section, currently it's showing 17px scroll-bar. After excluding this width, your media query will work.
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have this CSS:
#media (max-width: 1100px) and (max-device-width: 1100px) {
.wrapper {
width: 200px;
}
.page {
width: 100%;
}
I have also tried the following css rules:
#media (max-width: 1100px) and (max-device-width: 1100px) {
and
#media only screen and (max-width : 767px) { .wrapper { width: 100%; } }
and
#media only screen and (min-width: 1024px) and (max-width: 1280px)
and
#media only screen and (min-width: 993px) and (max-width: 1024px)
None of these CSS rules work.
Its all being totally ignored on an iPhone.
But it works fine in a browser resized to iphone size.
Have a look for yourselves:
http://www.moonshineandfuggles.com/
Ive extended the max-width to ridiculous values to try and include iPhones.
I dont want the .wrapper to be 200px, I want it to be 100% and for it to take into account the width of the device.
It seems like the iPhone thinks it should make this page about 700ish pixels wide.
How can I make the iPhone realize I have made this site responsive so it adjusts to the correct size?
The following has some information you might find useful of media queries -
What is the difference between "screen" and "only screen" in media queries?
My first recommendation is that you design the flow of your CSS to work from your smallest supported resolution outwards, such as designing your CSS file to support mobile devices and then using media queries to deal with changing the properties in your CSS file to support larger resolution windows / devices.
The following link explains the benefits of this more clearly than I am ever likely to - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php.
Using this design approach makes it easier to deal with questions of specificity, which can occur when you try to use a media query to override an already defined property. One handy way of avoiding such conflicts I obtained from Media Query Styles Not Overriding Original Styles - note Adrift's usage of body.
You do not need to use media queries to override a property if you are not going to actually change it - e.g. you do not need to specify the width of wrapper in your media queries since it has already been defined in the main body of your CSS file.
As for your problems regarding width, try setting the width of body (or, failing that, wrapper) to 100vw if you are having trouble with 100%.
I hope that the above is not too confusing.
If you have any questions, then please feel free to reply.
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/
How can I scale web page to look nice on mobile devices?
On page I have iframe. Iframe contains html5/javascript game that uses fixed position divs. I want to scale that iframe as well.
Thank you very much.
EDIT:
I know I wrote this a LONG time ago, but here is the best solution for modern browsers: CSS Media Queries.
A little bit like the HTML option bellow, CSS Medial Queries are a native approach to responsively reflow any elements depending on the browser size.
I usually base myself on a standard 980px website, and adapt it from there using these media queries:
#media (min-width: 1920px) {
// Your CSS here
}
#media (min-width: 1280px) {
// Your CSS here
}
#media (min-width: 768px) {
// Your CSS here
}
#media (min-width: 0px) {
// Your CSS here
}
The order is important as the browser will cascade down from the highest min-width to the one it needs.
There are great examples from Chris Coyer from CSS-Tricks.com here:
http://css-tricks.com/css-media-queries/
ORIGINAL POST:
You could simply use conditional CSS to give it a specific look for every screen size. There are a few way you could do it: With Javascript or with HTML (which is faster).
HTML: This example would use a certain CSS (iPad_Portrait.css in this case) when the device has higher resolution than 481px but lower than 1024px. It works great with iOS devices, even with the iPhone 4 and 4S with super high resolution displays. But does not work at all with android's high resolution displays.
<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPad_Portrait.css" type="text/css">
JavaScript: This example involves browser detection which is not always reliable, but I have had pretty good results with the following code:
<script type="text/javascript">
$(document).ready(function()
{
if((/iphone|ipod/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE IPHONE SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else if ((/ipad/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE IPAD SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else if ((/android/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE ANDROID SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else if ((/blackberry/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE BLACKBERRY SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else
// IF NO MOBILE BROWSER DETECTED, MOST LIKELY IS A COMPUTER, THEN IT DEFAULTS TO THIS FILE.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
});
}
<script>
If you put that code in your head, it will choose the appropriate css file for each of the device types.