I've been using Apple's Xcode tool (iOS Simulator) to code iPad views. I can't target landscape view on the iPad Retina device.
I've been trying the following media queries...
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
#media only screen and (min-device-width : 1536px) and (max-device-width
: 2048px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
I can't find any other way to target the landscape view in iPad Retina. I have even tried this code in different parts of the CSS file, still no luck at all.
The first one is correct, i use the same media query and is working on a real device.
Maybe you forgot to include the meta viewport?
I've just realized my FTP program was not working correctly when I entered the editor inside the Wordpress dashboard (the query was not there) so I manually wrote it dawn directly on my theme's CSS file and it worked.This FTP program stole hours from me.. but the query was right and the meta tag as well.
All in all, for anyone experiencing issues while coding new iPads Retina displays (32 and 64 bits), they should include the meta viewport in their headers:
<meta name="viewport" content="width=device-width, user-scalable=no">
and the corresponding query (Landscape view, in this case)is:
#media only screen and (min-device-width : 768px) and (max-device-width
: 1024px) and (orientation : landscape) and ( -webkit-min-device-
pixel-ratio: 2){ //style goes here// }
Related
Well, it's similar to My iPhone 6 gets the iPhone 5 media query ques, but I am still unable to figure out the answer.
I have a CSS written in Iphone 5/SE media query as below :
'#media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2)' : {
shippingPrice : {
fontSize : '12px',
width : '29%'
}
}
The same CSS is getting applied for Iphone 6/7/8 devices as well. I am using CSS in JS.
We have a website that our client uses which looks fine on iOS8 and iPhone 6/6 plus.
We wanted to display it in app in a UIWebView but noticed it was being zoomed.
We use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Should we also set #media
iPhone 5 and below Breakpoint:
#media (min-width: 320px) { … }
iPhone 6 Breakpoint:
#media (min-width: 375px) { … }
iPhone 6 Plus Breakpoint:
#media (min-width: 414px) { … }
We tried checking scaledPageToFit on UIWebView in storyboard but it seems to have no effect.
See screenshot for the problem
Any ideas.
Like rdurand said, you need to add launch images to your iPhone project. You can either specify a Launch screen file or a launch image source. Once you do that, then your app will not look scaled up or zoomed in.
Can be fixed by setting up the iPhone 6/6 plus launch images.
Id also recommend using ASSET CATALOG CREATOR -
https://itunes.apple.com/gb/app/asset-catalog-creator-app/id809625456?mt=12
Run it twice for IOS ICONS/ IOS SPLASH
then just drag the *xassets files into your project and replace the current only.
HERES how to check if app is zooming:
background-size:cover does not seem to work on iPhone 3. I've read somewhere that using background-size:100%; instead should solve the problem, and it does. However, it makes the background on Iphone 4 look ugly.
I've searched on the internet but all I find are queries for both the Iphone 3 and 4. Is there a media query for JUST the iPhone 3?
EDIT: I posted my solution in the answer below
I found a solution for my problem.
This blog post has a list of media queries for specific iPhone versions.
<!-- iPhone 2G, 3G, 3GS Portrait -->
#media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Portrait Orientation */
}
<!-- iPhone 2G, 3G, 3GS Landscape -->
#media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Landscape Orientation */
}
As you can see it only targets up to 3GS.
I have not a link to share at this point but was wondering if anyone had come across the same problem as myself.
I have made a responsive website, the client requested that the site should be responsive from 1080px in width down to 960px in width, this was easy to build and works on the Desktop but on the ipad in portrait the website is chopped off, in landscape however its perfect.
I'm thinking its something to do with the initial width being used on render..
I've tried:
<meta name = "viewport" content = "width=device-width; initial-scale = 1; maximum-scale=1; user-scalable = no;" />
and
<meta name="viewport" content="width=device-width, initial-scale=0.7">
as a "fix" maybe I should set a fixed width for ipad?
Leave your meta with initial-scale = 1;
Then go in you media queries and find if you are checking for ipad dimensions
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
Please bare in mind that you need extra media queries for ipad3/4
I've developed this page:
http://bluebeam.com/us/support/ipad/
The media queries are working fine in every browser but when I test it on an ipad it does nothing... It just reverts back to normal CSS. I've cleared browsing data on the iPad without results. I can see it working on my iPhone.
Can anyone spot an issue with my code?
Edit: the first query (horizontal layout) is working. But the second is not triggering when I flip the ipad (vertical layout).
If I remember correctly the iPad swaps the width/height values when the orientation changes. I would try this:
/* portrait*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/* landscape */
#media only screen
and (min-device-width : 1024px)
and (max-device-width : 768px)
Its been a year since I faced a similar problem so I could be a bit behind the times.