I am having an issue with an Angular site with padding that only appears on mobile Safari. I am trying to address it with media queries but so far none on them are taking effect. I am running the iOS simulator with the iPhone 11. I have tried:
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
#media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2)
#media only screen
and (min-width: 375px)
and (max-width: 767px)
I got these from various searches for the iPhone 11. The simulator does not apply the change. I have also included this in the index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This is what the issue looks like on mobile safari, where the element is clipped off at the top.
Interestingly, on the Chrome dev tools iPhone layout, it does apply the style properly. The issue is that the problem does not occur on Chrome so it ends up over applying the padding like shown:
So based on this, I think the queries are correctly applied but they just are not being accepted by mobile Safari. I'm not sure what is is that I'm missing. Thank you in advance for any assistance.
EDIT:
The most recent attepmt with min-width instead of min-device-width still has not worked.
#media only screen
and (min-width: 375px)
and (max-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
Related
I don't know what else I could do but for some reason, the responsive does not work on mobile!
When I resize my browser it works fine but on my iPhone X, there is no change...
I have this already on my <head>:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
Here is a snippet of my CSS:
//I have this setting for browser resize and it works fine:
#media screen and (max-width: 700px){
*Style*
}
#media screen and (max-width: 700px){
*Style*
}
//And here for iPhone but it doesn't work at all
#media only screen
and (min-width: 375px)
and (max-height: 812px)
and (orientation : portrait) {
*Style*
}
I want to set different media queries for 1024px width screens depending on whether it's a laptop screen or iPad screen.
For example if someone view my site in laptop(width : 1024px) they should see an image and if they view it from iPad(width : 1024px ) the image should be hidden(display:none).
You probably mean iPad Pro whose width is 1024px.
You can detect whether the device is an iPad or a laptop using media queries by checking for the device height: iPad Pro height is 1366px which, I think, is higher than the height of any laptop, so the CSS would look like this:
#media screen and (min-width: 1024px) and (min-height: 1320px) {
/* iPad Pro */
}
#media screen and (min-width: 1024px) and (max-height: 1310px) {
/* Laptop */
}
If the width of the screens are the same size, CSS can't distinguish them from each other I guess.
You can use JavaScript. The platform property, from the navigator object, returns a string with the platform the browser is used on. (i.e. MacIntel, Win32) (Usage: platform.navigator)
For disabling and enabling stylesheet this might work for you: http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/
for ipad specific media queries use below code,
if u want to hide img in ipad at 1024px width i.e. landscape mode u can use class "hide-me-landscape"
if u want to hide img in ipad with landscape and portrait mode use class "hide-me"
if u want to hide img in portrait mode use class "hide-me-portrait"
see below code for ex
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me{
display: none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-portrait{
display: none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-landscape{
display: none;
}
}
you can learn more about it here
you can also use modernizr to detect whether user is using touch screen device or not and apply your css accordingly
hope it helps :)
I have the following css:
/* iPhone 4 Landscape */
#media only screen
and (max-device-width: 480px)
and (min-device-width: 320px)
and (orientation: landscape) {
.dropdown-menu{
height: 210px;
}
}
/* iPhone 4 Portrait */
#media only screen
and (max-device-width: 480px)
and (min-device-width: 320px)
and (orientation: portrait) {
.dropdown-menu{
height: 370px;
}
}
/* iPhone 5 Landscape */
#media only screen
and (max-device-width: 568px)
and (min-device-width: 320px)
and (orientation: landscape) {
.dropdown-menu{
height: 210px;
}
}
My problem is that the iPhone 5 condition seems to be taking affect on iPhone 4. I know it's effectively doing the same thing (setting the height to 210px) but is there are reason for this? I'm testing it in chrome's phone emulator.
It seems like it's only seeing the one condition of min-device-width being 320px and using that query as opposed to using all of the conditions together.
Thats because the iphone 4 screen will fullfill both media queries (resolution is lower than max iphone 5 media query) and the iphone 5 is the last one. Being the last one it overrides the iphone 4 media query.
When I look on my iPad on landscape view, the CSS Media query max-width: 992px is not working and the responsive layout is still visible (but on desktop it breaks at 992px). Any help is appreciated.
<meta name="viewport" content="width=device-width" />
My CSS media queries:
.responsive_button{display:none;}
#media only screen and (max-width: 992px) {
.responsive_button{display:block;}
}
#media only screen and (max-width: 768px) {}
#media only screen and (max-width: 480px) {}
#media only screen and (max-width: 320px) {}
iPad resolution is:
768px by 1024px (Portrait)
1024px by 768px (Landscape)
If you want to target ipad's different orientation use the below media queries mind that the orientation is specified as well.
iPad in Portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad in Landscape:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
An iPad's resolution is 768px by 1024px, this means in landscape mode, it is 1024px wide. The media query will not be active as 992px fits onto the 1024px wide screen.
As a general rule, iPads in landscape mode should just be treat as desktop screens.
Problem
Css media queries are not working well in Smartphones and Phablets, but are working quite well in emulators. The problem is that the media queries are miss matching. for example my phone screen size is 320px but it applying 720px css.
Maybe
What I thing the problem arise due to absence of "(min-device-pixel-ratio : 1.5)". but i have no idea what is it and how to use it..
The Website
Hava look at the website | AtDrive.com
#media only screen and (min-width: 480px) and (max-width: 619px)
#media only screen and (min-width: 320px) and (max-width: 479px)
#media only screen and (min-width: 250px) and (max-width: 319px)
#media only screen and (max-width: 249px)
This is meta tag to your page.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Have a look some media queries
http://mediaqueri.es/