i was reading here about zoom
Zoom website depending on monitor resolution?
and it seems nothing works
I want to test the browser width / browser view port and then, if it is a high number, I want to automatically have the web page zoomed to say, 110%
cross browser compatible.
how to do it?
The better approach to achieve this using responsive design.
Calculate every element in rem unit so that as you change the font-size on root element; all of your element's looks bigger/smaller on screen through desire media quires.
i.e: let suppose you have a div and h1 elements and you want to show bigger/smaller on different screen then you should follow the code:
<div>
<h1>Hello</h1>
</div>
<style>
div{
height: 25rem;
border:1px solid red;
}
h1{
font-size: 4rem;
}
#media screen and (min-width: 600px) {
html{
font-size: 16px;
}
}
#media screen and (min-width: 1200px) {
html{
font-size: 20px;
}
}
</style>
So in above code the div and h1 tag should be big or small as you change your font-size on html tag depending upon media query breakpoints.
Related
I have a website that I developed, but I just got a screenshot from someone who was looking at it on a 2560 x 1600 monitor and it looks kind of ridiculous. What is a reasonable upper limit for screen resolutions to support? I'm concerned about negatively impacting load time by adding a huge image. How can I deal with this properly?
Solution 1: Maximum width
Use a container div with the following CSS:
#innerbody {
width: 100%;
max-width: 2000px;
margin: 0 auto;
}
Put all HTML in this container (wrap the container around all HTML), like this:
<body>
<div id="innerbody">
... your page ...
</div>
</body>
I would also add a nice subtle background color to the body, to mark where the 'page' ends, like this:
body {background: #eee;}
#innerbody {background: #fff;}
Solution 2: Mask the quality
If you are only worried about the (poor) image quality, you can add the container div (from solution 1) and use this CSS to overlay a hatch (diagonal lines). This is trick is often used for low quality full-screen video, but also works for background images.
#innerbody {
width: 100%;
background: url(/hatch.png);
}
Solution 3: Media queries
Got a big screen? Thou shall get a big image. Got a small screen? Thou shall get a small image. Sounds logical, right? You can achieve this by using media queries. This works like this:
#media screen and (max-width: 500px) {
body {
background: url(small_image.jpg);
}
}
#media screen and (max-width: 1000px) and (min-width: 501px) {
body {
background: url(medium_image.jpg);
}
}
#media screen and (max-width: 2000px) and (min-width: 1001px) {
body {
background: url(big_image.jpg);
}
}
#media screen and (min-width: 2001px) {
body {
background: url(really_big_image.jpg);
}
}
For each screen size ONE of these media queries will be true. That image wil be served.
To address your load time concern, one option is to use media queries so you can control the background image based on visitor viewport size. e.g.
#media (max-width: 800px) {
.div-with-background{
background-image: url("background-sm.jpg");
}
}
#media (max-width: 1200px) {
.div-with-background{
background-image: url("background-md.jpg");
}
}
#media (min-width: 1201px){
.div-with-background{
background-image: url("background-lg.jpg");
}
}
What is a reasonable upper limit for screen resolutions to support?
It depends on your visitors. If you use Google Analytics, you can get details on this by going to Users > Technology > Browser & OS and under 'Secondary Dimension' search for 'Screen Resolution'
Hope this helps!
I'm trying to figure out how to remove the image if the browser height is larger than 1080 pixels. For example android devices would have more than 1080 when the page loads and my image is loaded and it goes down to about 2/3 of the page and the rest of it is blank. I would rather it be gone entirely. How can I get rid of it. Here is how I am setting it:
body {
font-family: Helvetica;
font-size: 1.8rem;
background-color: #000;
margin: 0 auto;
background-image: url("../images/myimage.jpg");
background-repeat:no-repeat;
background-position:center top;
background-position:no-repeat;
background-attachment:fixed;
}
what I tried
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
Try a media query!
/* standard*/
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
/* orientation */
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
You will want to use a media query here, but you want to focus on max-height (not width... which is what media queries typically focus on, eg, http://unmatchedstyle.com/news/height-based-media-queries.php)
#media screen and ( min-height: 1080px ){
body { background-image: none; }
}
You should probably spend a bit of time learning about mobile responsive design in general, specifically because the media queries can come in handy with problems like yours. This is a very good place to start reading about them: http://alistapart.com/article/responsive-web-design/
Also note that certain JS plugins (eg Backstretch for example) stretch your image to whatever the background size happens to be... that might be another thing to look into, if you are interested.
Give the element containing the background image an id attribute then use that id attribute to assign the style to the background using an if statement with JavaScript.
<script>
var element = document.getElementById("elementHoldingTheBackground");
if (1080 < window.innerHeight ) { // returns a number
element.style.display="none"; // hides the element with CSS
}
</script>
That's the most simple way from the top of my head but I'm sure there are better ways to do it!
I'm also no expert. Please don't cook me over this. I'm only 18. I'm new to this!
Please tell me what you think.
I'm trying to work out how to use EM media queries in my latest project. However after some testing I've found that the media queries are ever so slightly off and I can't work out why. It might have something to do with it using the parents font size instead of the body. My body is set to 14px and my workings out look like:
$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px
body font size:
body{
font-size: 14px;
line-height: 1.5;
min-height: 100%;
}
*(from my SCSS breakpoint variables) From what I understand I did: 768 / 14 (base font size) = width in em's
Say I've a div called header, there is no font-size set on this div, only children of this div. Surely it would still then use the body font-size?
Ems in media queries are never based on the font size of body, or any other element for that matter. They always refer to the default font size set by the user in the browser preferences. In most browsers this default font size is around 16px, and in CSS this corresponds to the initial value of the font-size property which is medium. From the spec:
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
This same default font size is inherited by the root element, which is html, not body (see here). Specifying a relative font size on body just means body bases its own calculation on the computed font size of html. This being stated, note that setting font-size on html will not affect how ems are calculated in media queries either.
Your guesswork is correct, the em unit sets the font size relative to the parent element's font-size, not relative to the document root. If you're looking for the latter you're looking for the rem unit, but browser support might be a problem for you, depending on your application.
See the following Fiddle for a sample: http://jsfiddle.net/afp46/
HTML:
<span >This is text</span>
<div><span >This is text</span></div>
<span><span>This is text</span></span>
CSS:
body {
font-size: 14px;
}
div {
font-size: 16px;
}
span {
font-size: 1.2em;
}
I would change that to body font size 100% and then you have the flexibility of EMs and %s site wide
I would highly recommend you do font-sizing with rem, which stands for "root em". It's much more consistent. Read more about it here: http://snook.ca/archives/html_and_css/font-size-with-rem
Also, I would recommend adding this to your CSS:
html {
font-size: 62.5%;
}
Now, your rems or ems will be easy to convert. 10px font-size would be 1rem or 1em. Nice, right? :) Again, use rems, its a much better practice these days.
Please try this code. I have already used this my last project it working in fine. so please try.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px. */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px */
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
I'm designing a responsive website and after change my cellphone orientation from portrait to landscape and then to portrait the CSS stop working.
Initially the css that I apply to the the 320-480 resolution loads very well in my portrait screen and also in the landscape but when I change it back to portrait the css stop working, is like is not loading the css.
What's the problem????
When using css media queries it is unnecessary to assign a min width, you can use simply max width and have multiple queries if you want the layout to change at a different point. I can't explain why your css works initially but then changes when you turn the screen a couple times but here is some good css media query practice and syntax that could solve your problem:
#media only screen and (max-width: 320px){
/*Some css styling for widths below 320 pixels*/
}
#media only screen and (max-width: 480px){
/*Some css styling for widths below 480 pixels.
Keep in mind that this css will only be applied for viewports between 320
pixels and 480 pixels*/
}
It is not necessary to use device-width when you can simply use width. Also the 'only screen and()' is good practice for detecting mobile viewport widths in css. I hope that this helps and your problem is solved.
The css
#media all and (min-device-width: 320px) and (max-device-width: 480px){
#reviews{
display: none !important;
}
.footer {
border: 1px solid #CCCCCC !important;
}
ul,ol{
margin-left: 0px!important;
}
.bottom-menu ul{
margin-left: 25px !important;
}
#side-quote{
display: none;
}
#export-dption{
float: bottom;
}
#export-request{
float: top;
}
.panoramic-pic{
padding: 0px !important;
}
#googleMap{
display: none;
}
.quote-index{
width: 100% !important;
background: red !important;
}
}
and the cellphone is a LG Optimus F3 and the browser is chrome.
as you can see in the selector .quote-index is set the background to red, initially it loads in red when the phone is in portrait mode but when i change it to landscape an then back to portrait is like that selector doens't exits.
I am developing a website with a desktop and iPhone 4 viewport. When I am doing the bulk of development and viewing it through my desktop's browser using a viewport chrome extension, it is rendered fine and looks good. But when I view it on my iPhone 4s the width is corrupted. I have no logic that tells it to act like this. I cannot see what the issue is, was wondering if anyone could think of some possible problems?
Desktop (at 320 viewport): -----
iPhone 4S:
Query used for the .container{} class that wraps the entire site.
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (min-width : 320px) {
.container {
width:75%;
}
}
Many thanks for your help.
You likely have two problems at work here that are unrelated to your .container. Why do I think this? Your menu is showing up nice and large but your other content isn't. You said .container wraps everything. So we shouldn't be seeing a discrepancy there.
So, you're two problems are likely related to:
You're probably missing some meta tags in your <head>. It looks like media queries seem to be working for you, but your scale is off. Try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
Your menu styles. Do they have a set size? Is there a media query that's adjusting it?
Without seeing the menu styles, I can't really say what exactly is wrong there...
use this code for iphone 4
Screent width Between 320px to 480px
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media and (min-width : 320px) and (max-width : 480px) {
.container {
width:75%;
}
}
Else use below code for <320px widht screen
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (max-width : 320px) {
.container {
width:75%;
}
}
And your mistake is, You wrongly put min-width : 320px instead of max-width : 320px
More...
My best guess is that it's something to do with the Retina display. The viewport on your desktop measures pixels on an ordinary display. On a 4s 320 pixels are not actually full screen - instead it's 640. You should check out the device pixel ration query http://css-tricks.com/snippets/css/retina-display-media-query/