I have a iPhone 11 and try to reach my site https://tryggarehem.se/, I have specified meta tags relevant for using media queries. However, it seems not to work at all. I am totally lost here, this is my code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
...
<link rel="stylesheet" href="assets/css/main.css" />
...
</head>
CSS file:
#media only screen and (max-width: 950px) and (min-width: 751px) {
.main-content {
margin-top: -200px !important;
}
}
#media only screen and (max-width: 750px) {
.main-content {
margin-top: 0px !important;
width: 100% !important;
}
}
iPhones are non-standard in their handling of CSS pixels vs device pixels. It might be possible your screen width is different than what you are assuming. You can fetch current screen width and check whether it lies within your applied range.
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("data");
x.innerHTML = "Browser width: " + w + ", height: " + h + ".";
<html>
<body>
<p id="data"></p>
</body>
</html>
You can also try to use standard media queries for iPhones mentioned in this answer
I was having the same issue.
What worked for me
Instead of
#media only screen and (min-width: 600px)
I used
#media screen and (min-device-width: 600px)
Reason is
All you are essentially interested in is the width of the viewport no matter the device. However the main difference between width and device-width is that device-widths don't always match the layout viewport of said device. Many tablets and mobile devices don't always have 1 device pixel per CSS pixel.
Related
#media only screen and (max-width: 620px) {
.priority-images{
width: 65% !important;
}
}
#media only screen and (min-width: 320px) {
.priority-images{
width: 90% !important;
}
}
.priority-images is registering 620 breakpoint instead of 320 breakpoint and its frustrating me, I know it targets everything below but when I have used this method with success before any suggestions?
Basically, you are following both mobile-first (min-width) and desktop-first(max-width) approach together. And there is an overlap from 320px to 620px here, in which case 320px takes precendence not the 620px.
In your media query:
#media only screen and (max-width: 620px) {...}
The viewport is targeted from width=0 to width=620px of the screen. However when you used:
#media only screen and (min-width: 320px) {...}
Now when your browser width gets 320px of width, the 620px media query is overridden by this one.
And as per my observation and code snipper, the .priority-images is not getting precedence at 620px but at 320px itself . The min-width:320px media query takes full control of CSS as soon as the Browser width gets greater than or equal to 320px. So, I don't see min-width:620px media query being applied after the 320px browser width at all.
Check the below code snippet:
body {
height: 100vh;
width: 100vw;
}
.priority-images {
height: 90%;
margin: 0 auto;
}
#media only screen and (max-width: 620px) {
.priority-images {
width: 65% important;
background: orange;
}
}
#media only screen and (min-width: 320px) {
.priority-images {
width: 90% important;
background: green;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="priority-images">
There are no accidents ... No there are not !!!
</article>
</body>
<script src="./script.js"></script>
</html>
if you want the 320 breakpoint to be applied when 320 screen size is reached change the
max-width: 620px
min-width: 320px
to
min-width: 620px
max-width: 320px
here is the codepen
https://codepen.io/shammlo/pen/YzGQKjQ
So I have made a HTML email, with a mediaquery for screens under 399px width. Everything works fine until you open the mail on portrait mode(width under 399px), and then rotate your screen to landscape mode. When you rotate the screen it seems like the width doesn't update to the new width (let's say 450px, so the mediaquery isn't active).
When I have my phone in landscape mode, and then open the HTML mail everything is fine.
I've already tried different mediaqueries with max-width, device-widthand orientation: landscape. In the head i've the meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
Here is my media query:
#media screen and (max-device-width: 399px) and (max-width: 399px) {
#body_table {
padding: 0 10px;
}
.container {
width: 100%;
}
}
My #media only screen and (max-width:860px;){ doesn't work on the browsers when I put the html-code inspector on mobile.
its mostly explained on this image.
It does work on my other #media codes for example:
#media only screen and (max-width: 1000px) {
.extramargin {
margin-left: 0;
}
#click {
margin-left: 40px;
width: 90%;
}
}
If more code is needed I can send more code. I don't know what part of my code cause I have 1200 lines of code and have to search a time before I will find everything to make a code snippet. But if its needed I can do that.
You have to tell the browser that you want the width of device to be the ACTUAL width of the device. So, you have to set the viewport.
Just include this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1" />
I have a website that has a fixed width of 1024px and is centered on desktop. On mobile devices, the width should match the size of the phone or tablet.
When using device-width, like this
<meta name="viewport" content="width=device-width, initial-scale=1" />
I get following result:
I get the same result using width=1024.
... Which is really confusing, since the user is unable to gather an overview. I don't know why device-width sets the website's viewport to this particular size. I would expect otherwise.
What I'm expecting and what I really want is something this:
Question: How do I tell the device to fit the website on the screen exactly?
In order to make a website adaptive and responsive I recommand using
#media screen and (max-width: the max width you want){ }
You can also add this in your . This will make the initial scale 1 and allow for some zooming into 3.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" />
You also need to use % instead of pixels on wrap elements. This way it adjust according to your screen.
Here is an example:
For devices with 0-500px width, run the second CSS code.
For devices with 500-1600px width, run the first CSS code.
You can also specify for retina using this:
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){ }
This is the other example:
/** From 500 - 1600px width **/
#media screen and (max-width: 1600px){
body {
background-color: #fff;
}
}
/** From 0 - 500px width **/
#media screen and (max-width: 500px){
body {
background-color: #000;
}
}
I asked a similar question earlier. You can check it out here.
What you got when remove scale factor from meta tag? And another question: do you want users to zoom (scale) page or not? I shall try better:
<meta name="viewport" content="width=device-width" />
and also:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
For fitting height and width you can play with those meta:
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
Problem that bugs me at the moment. Have not found answer so far.
I've got a site with minimum width of 480px applied for devices with screen smaller than 640px;
<meta name="viewport" content=" initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
<style>
body {margin:0; padding:0;}
#media screen and (max-width: 640px) {
.div {width:100%; min-width:480px; background:#ff0000; color:#ffffff;}
}
</style>
Thing is, when you open a file on mobile, it does not fit the screen in portrait mode. You need to double click to fit it.
Is there anything could be done so that opens fit to screen on portrait mode?
Thanks guys.
You have maximum scale and initial scale in your viewport. Change your viewport to : <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ahhh got ya. Right, below are two links... the 2nd one works keeping the color red - I think that's what your after (code for 2nd link example below, you will need both #medias)! Works on my phone now anyway!
http://www.bootply.com/render/115758
http://www.bootply.com/render/115760
#media (min-width:480px) and (max-width: 640px){
.div {
width: 100%;
background: #ff0000;
color: #ffffff;
}
}
#media (max-width: 640px){
.div {
background: #ff0000;
color: #ffffff;
}
}