I have the following code on this site (it's Github Pages so you can see the repo here):
#media only screen and (max-width: 600px) {
img {width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
a.box {
width: 100%;
padding:14px 15px;
font-size: 0.75em;
}
}
On my mobile (iPhone 7 Plus), the screen width doesn't appear to be triggering:
Nor does it on Firefox's Responsive Design mode for iphone 7/8/9 Plus:
But If I make the firefox window one pizel bigger:
It suddenly works!
Additionaly - if I set my responsive browser window to exactly the same sizes as the iphone 6/7/8 - then it works fine. Which suggests that it's NOT the size - it's something about the iphone user-agent-string? Maybe?
What is going on and how to do I fix it?
You need to add a meta tag in the head, for the browser to handle viewport zooming correctly:
<meta content="width=device-width, initial-scale=1" name="viewport">
Without the meta tag, the page is rendered at a higher screen width and then shrunk down to fit the device width. Hence the media queries will never be triggered.
More information on this can be found here.
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
in <head> tag of site
and it is better set standard max-width:768px instead of 600px for media-query
Related
When my website (www.missnisaa.com) is launched on mobile the page is zoomed in. The user needs to pinch in order to get the right scale. How do I get the right scale on launch?
I have tried changing the initial scale, maximum scale and minimum scale to various numbers to no avail
This is the current code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
I have also tried changing the css. Current code:
/*------------------------------------------------------------------------------------------------------*/
/*Mobile*/
/*------------------------------------------------------------------------------------------------------*/
/* Portrait and Landscape */
#media only screen
and (max-width: 768px)
and (-webkit-min-device-pixel-ratio: 1) {
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none !important;
}
The page is always zoomed in regardless of mobile browser. I have only tested on iOS as I dont have an android phone to test on.
You have width: 768px !important; in the CSS rule for body (in a media query below 768px). So your content will always be too wide for smartphones, which is why your iPhone obviously zooms the too-wide body to fit it into the screen. Just remove that - the default auto width is 100% which is what you need for a responsive website.
I removed that line and nothing has changed with the exception on safari and the banner image and text are now squashed to the left.
I also tried
width: 100% !important;
but that doesn't work either.
I have a very strange situation where the current pixel width shown on chrome dev tools is different to what's displayed when I right click on the body element and see the full width of the body element.
For example I am using
#media screen and (min-width: 992px) {
.card {
max-width: 356px;
}
}
However what I find is that this style is applied when the pixel width is 1240px (as shown on dev tools).....however the body element is 992px. What could be the cause of this?
I've put this metatag on my header in the html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edit: https://codepen.io/anon/pen/YQXGgg
Break seems to work on codepen browser but not when I run it locally :s
So, I'm adding some responsive stuff to a website, and usually this is no problem, but for some reason the page renders zoomed (at 0.3) when refreshing. All the CSS-changes are implemented, it's just the initial zoom that's wierd.
I use this in my <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
and the responsive stuff is within this tag:
#media screen and (max-device-width: 767px) {
/*responsive stuff that works*/
}
The page is if you want to have a look yourself: http://utt.se
Thanks for help!
Try delete all commas from <meta> tag:
<meta name="viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 user-scalable=no" />
From looking at your site I see that .blogContent has a width set on it, as does #mainContent.
Changing these to both be width: 100% seemed to fix it on chrome for me
You can also put zoom viewport property within css
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
click here for more information about viewport zoom
You should also replace width values to max-width
Replace this
.contentCon ul li {
width: 340px;
for this
.contentCon ul li {
max-width: 340px;
I am altering a site to be mobile optimised. I am currently testing on an iPhone 5C whose screen width (in portrait mode) is 640px.
However, when I set my sites #wrapper to width: 640px; the site only takes up about half of the screen. I have to set it to width: 1000px; for it to fill the phones screen.
#wrapper is the parent element of all elements so there is nothing on the outside of it to push the site outside of 640px. There is also nothing within #wrapper that is larger then 640px and I have set overflow:hidden just to be sure.
Would anyone know why this is occurring and what I can do about it?
The Media Query I am using is:
<link rel="stylesheet" type="text/css" media="screen and (device-aspect-ratio: 40/71)" href="css/ios5.css" />
you must insert this tag into your html HEAD tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The reason is clearly explained here.
I have a web page developed for an iPad for which I used different CSS files for different orientations:
<link REL="stylesheet" href="portrait_style.css" media="all and (orientation:portrait)"/>
<link REL="stylesheet" href="landscape_style.css" media="all and (orientation:landscape)"/>
When I start from landscape mode and then move to the portrait, I have to add 125px to all absolutely positioned elements. And when I start from portrait it is started from 0.
When I move from portrait to landscape and back, it again needs the offset.
There is a demo of this available here
I suspect the problem is that there some landscape element that is not changed in portrait mode.
In chrome on my PC this is not happening.
Try setting the fixed position again with media queries:
/* portrait */
#media screen and (orientation:portrait) {
.[your-selector]{
position:fixed;
}
}
/* landscape */
#media screen and (orientation:landscape) {
.[your-selector]{
position:fixed;
}
}
It looks like when you set the property again it repaints it.
This is caused by an element that pushes the boundaries of the browser viewport, either with a width over 100% or a left set to a negative value.
A fix I have found is to set the overflow of the body to make the viewport behave:
body {
position: relative;
width: 100%;
overflow: hidden;
}
Setting the position of the body will encapsulate all elements (whether absolute or relative) into the body and clip them at the edge of the body.
You might need to add this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
in your <head> section.
More info: Determining iPhone orientation using CSS