EDITED Aug 26th, 2015
Ok, this question might be a bit rough because this project is still in Dev stages so legally I am not allowed to share it yet to show my problem in real time.
The problem I am having is that I am building a site for a client and when we began the testing phases I passed every test except for iPad 4th gen. We then began to discover that all my code really looks monstrously large when viewed in ANY retina display (4th/5th gen, iPad air).
The problem isn't that the vh/vw properties aren't working, the problem is that suddenly 20vh (20% of the viewport height) is massive. I am using the padding of an inner container object to vertically center all content within its parent container by using padding-top: 20vh; padding-bottom: 20vh;.
I have been trying solutions here that involve targeting ONLY retina displays and none have worked at all. Heres what I have tried to target retina with...
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) { /* STYLES GO HERE */}
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0">
Problem is that doing all these techniques also targets iPad 1/2/3 as well for some reason and it is messing up my previously written code.
vh units are a newer css3 unit of measure so that older browsers are going to ignore them. So normally you are going to use a fallback with vh units. Something like:
.container {
height: 1024px;
height: 100vh;
}
Browsers that don't understand vh will skip it and use pixels.
However, Can I Use mentions that vh units are not fully supported until iOS 8. And it mentions, there is some "buggy behavior" in prior versions of Safari for iOS. It then provides as a work around to the issue, which may be useful.
So maybe this so called buggy behavior is what you are running in to.
Related
I want to change the font size of my page when it is viewed on galaxy fold device. But I am not sure how to deal with this using media queries. Can anyone help me and give me an idea about how can I remedy this ?
If you need media query for folded version of device you can use 320px screen width.
There is no other device with such screen width from popular ones so you can simply use this media query. Alternatively you can use JS module from npm to detect device and change font size dynamically
#media(max-width: 320px){
font-size: 10px
}
if you use just #media(max-width: 320px) , the code will be effect on others devices example : (Galaxy S8 Galaxy s7 ... ), use this css to fix the problem :
#media (min-width: 280px) and (max-width: 320px) { .your-class { font-size: 10px; } }
As of right now, there is a draft for a device posture API. Formerly it was the 'Screen Fold' API that would allow media queries of the type:
#media (device-posture: laptop) and (spanning: single-fold-horizontal){}
This would generally solve the issue of responsiveness for folding screens.
Sadly this isn't implemented yet, and alternatives like using a navigator.useragent property are unreliable and not recommended.
It's still in draft stage(as of Sep, 2022), but there's #container media query: https://drafts.csswg.org/css-contain-3/
In MDN web docs,
This doesn't quite achieve what media queries do for our entire layout however. Media queries give us the ability to size things based on ranges. When we add a class or target the element we decide that when the object is in the sidebar it must use the stacked layout. In terms of available space however, it may well be that on large screens the object in the sidebar would have enough space to display in the side-by-side layout.
Meanwhile, I think #media is the most viable option available for now as #Gîrbu Nicolae stated
#media (min-width: 900px) and (max-width: 911px) and (orientation: portrait) {}
Tolerance ~5px, working fine for me, I test it
I have a question on media queries.
My html is the following
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
my css is the following
.item {
width: 50px;
height: 50px;
background-color: yellow;
width: 100%;
margin: 8px;
}
#media screen and (max-width: 720px) {
.item {
background-color: green;
}
}
I have the following line in index.html <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Now, if I reduce the size of the browser, I see the divs in green. If I use the Chrome device simulator for iPhone6 plus, I see the divs green. If I use other iPhone plus simulators I see the divs green.
BUT, if I install this code into an app server (a simple ASW S3 in this case), and I download the page on my iPhone6 plus, I see the divs in yellow.
Apparently the media query does not work properly. I am sure I am doing something wrong, but I am totally blind at the moment.
You have to understand the difference between max-width and max-device-width.
Here max-width is width of the target display area, e.g. the browser
and max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
So based on your device iphone 6 plus your css should be like below for landscape mode
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 3)
{ }
and for portrait
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
and (-webkit-device-pixel-ratio : 3)
{ }
Thanks all.
I have done some analysis and found the cause, even if not the solution.
The web server where the site resources are hosted is an AWS S3 instance, let's say http://my-site.s3-website.eu-central-1.amazonaws.com/.
If I access my site directly from AWS S3 with the address http://my-site.s3-website.eu-central-1.amazonaws.com/ then everything works as expected, i.e. media queries work fine on mobile devices.
The domain I want to use to access the site is mydomain.com, which I have defined with GODADDY.
Therefore I have defined a redirect rule in the GODADDY configuration so that it points the correct AWS S3 address. I use the option "Forward with masking" since I want to see mydomain.com on the browser bar.
If I access now the web site FROM A MOBILE DEVICE using the domain mydomain.com I see something different, the site looks like it is not using the css media queries. By the way, this happens only on mobile devices, on the browsers on PC or Mac everything works as expected.
Now I make a change in the GODADDY configuration. I use the option "forward without masking". Everything works as expected even on the mobile devices, even if I have to see in the browser bar the http://my-site.s3-website.eu-central-1.amazonaws.com/ address.
As I said at the beginning, this seems to be the cause of what I have experienced. No idea about a solution. I will post a more specific question, now that I know something more.
I've spent a few days tearing my hair out looking for a solution to ipad media queries with UIwebview.
I've tried device-aspect-ratio, different min / max widths or device-widths.
In Xcode the simulator or my Ipad seem to act as if they are Iphones.
A web page loaded into my domain acts correctly on the ipad.
it seems that the problem comes from xcode
i have
<meta name="viewport" content="width=device-width ">
in the html page
the css:
#media all
and (max-width: 667px)
{
body::before{ content: "phone fired"}
h1{
color: #F0F;
}
}
#media all
and (min-width: 768px)
and (max-width: 1024px)
{
body::before{ content: "ipad fired"}
h1{
color: #F0F;
}
}
If i take out min-width: 768px from the css, both Iphone and Ipad display Ipad fired, as the Iphone is within 1024px;
with min-width: 768px in place the Iphone acts correctly but the Ipad displays "phone fired". It acts as if it's width is less than 768px
What are your targeting devices?
Check your settings in Target => General => Devices
If you are targeting iPhone only, the app runs in iPhone mode on the iPad and you won't get a different device size here. So you'll need to select Universal, to natively target both.
This did the trick for me in my test project :-)
You should also use #media only screen when targeting screens. This may not be an issue at all, but it is somehow more correct.
You should use min-device-width instead of min-width, when checking for the with of the device.
Let me know if, this does not help you. Then I'll check out some more stuff.
I'm working on an asp.net site and making it responsive, just using #media commands in the stylesheet.
Usually when I work on apache websites, e.g. wordpress as soon as I refresh the page, I can resize the brower to a mobile or tablet size and see the changes on a PC browser. But with this .net site the changes don't show.
They do show however on my actual mobile phone, but I don't want to have to keep previewing changes through my phone.
I've tried using an emulator like mobiletest.me but that doesn't display the changes either. I've tried using Firefox and Chrome, neither work. It seems the website isn't being fooled into thinking my browser is a mobile.
Anyone have an an idea on what this issue could be?
Thanks
UPDATE
Sorry code below:
#media only screen and (max-device-width: 480px) {
#block1 {
display:none;
}
An educated guess says that you are using a specific media query for devices, rather than resolution alone, which is why it's not responding when you resize the window.
Mobile devices: (what i suspect you have)
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Based on Resolution: (what you require)
#media only screen
and (min-width : 320px) {
/* Styles */
}
I am developing a website which will be responsive in that different CSS styles are applied depending on the width of the users' browser.
the method chosen was to use CSS media queries.
my problem is this: when I use the following code
#media screen
and (min-width: 200px)
and (max-width: 800px)
{
#example
{
background: purple;
}
}
this works when I resize the window on my PC, but is not recognised by my phone whose resolution is within the limits.
perhaps more perculiarly, when I use the following code
#media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
#example
{
background: purple;
}
}
this has the inverse effect: displays on phone, but not on PC.
as far as I have read there is no scope for an "OR" operator for something along the lines of the following to be valid
#media screen
and (
((min-width: 200px) and (max-width: 800px))
| / || / OR
((min-device-width: 200px) and (max-device-width: 800px))
)
{
#example
{
background: purple;
}
}
so my question is this: is there a way test responsive CSS on both desktop and phone simultaneously?
I have tried so many combinations:
using #media only screen,
using Android, Firefox and Chrome browsers on the phone,
but to no avail, the result is always the same.
The only way I can think to do this at the moment is to create two separate stylesheets, one for desktop and one for phone, but this would mean updating two stylesheets every time I wanted to view changes in the browser, which is impractical and counters the idea of responsiveness.
I looked into using the orientation: landscape/portrait target, but as far as I can make out this would again involve writing two sets of CSS.
One last consideration is that the website is currently using pure CSS; so no javascript, user-agent determination nor server-side scripting at this point in time.
This must be possible so any insights will be appreciated. I'm sure someone will have had the same problem and enlighten me.
Try using a viewport meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Place that into the head section of your page.