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:
Related
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// }
So I have a mobile theme working on my wordpress site and I want to use a splash screen for when users launch the app/site from their home screen.
However, for some reason, I cannot get it to work, and I think the reason to this might mainly be the fact I am running iOS7
<link rel="shortcut icon" href="/favicon.png" />
<meta name="apple-mobile-web-app-title" content="The Ixellian">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="http://ixellian.be/splash/iPhone3G-01.png" media="screen and (max-device-width : 320px)">
<link rel="apple-touch-startup-image" href="http://ixellian.be//splash/iPhone4-01.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">
<link rel="apple-touch-startup-image" href="http://ixellian.be//splash/iPhone5-01.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">
This code is in the same place where I have my favicon, the header.php. And I really have no idea what could makeit not work.
I tried to use a plugin to see if someone else's code makes it work, so I tried "Add to home screen WP" plugin and the only thing that it did get working was the fullscreen mode.
Anyone know if the splashscreen thing is an iOS7 bug?
If you need any closer details, please go ahead and ask me, I'll gladly help you to help me.
Thanks in advance!
Here you have the solution:
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
The splash images must have the right resolution:
If none of the startup images are the right resolution, Safari will
simply display a white screen. Note that all startup images are
actually in portrait orientation. Landscape images should be rotated
90 degrees clockwise. There are no landscape startup images for
iPhones since they always start in the same orientation.
The resolutions are:
iPad retina portrait: 1536x2008px
iPad retina landscape: 1496x2048px
iPad portrait: 768x1004px
iPad landscape: 748x1024px
iPhone 4": 640x1096px
iPhone 3.5" retina: 640x920px
iPhone 3.5": 320x460px
The difference with the full resolution value is due the status bar (20px for non-retina and 40px for retina).
I actually managed to solve it with an updated version of the WP plugin I mentioned before. If that fails, I'd try fcducarte's answer.
I'm currently try to create proper #media queries to target 3 different device groups: phones, tablets and desktops
I use the following mixin in SASS to get it done:
#mixin respond-to($media) {
#if $media == phones {
#media only screen and (max-width: 320px) { #content; }
}
#else if $media == tablets {
#media only screen and (min-width: 321px) and (max-width: 979px) { #content; }
}
#else if $media == desktops {
#media only screen and (min-width: 980px) { #content; }
}
}
This actually works pretty well for most devices i have around.
BUT i have an iPad 2 here and tried the site with Safari and the following happens:
in portrait mode everything is fine. it will be handled by the "tablet" group as it should be.
in landscape mode (when it has 1024px width to work with) it will still fall into the tablet group. But it shouldnt as my layout works perfectly on screens wider than 980px.
As i found out the iOS devices always report their screen size as they were in portrait mode (actually a stupid idea) which in my case is 768x1024. With the media queries above it will never end up in the non-tablet section when its in landscape.
is there a way to exclude the ipad 2 in landscape mode from the tablet query WITHOUT disturbing other devices (like androids which behave correctly)?
Otherwise i have to target every device seperatly with their own strict media query which i want to avoid.
I bet the problem is due to your viewport meta tag. The following is what I use on all responsive sites:
<meta name="viewport" content="width=device-width, initial-scale=1">
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.
I am developing an iPhone/iPad app using PhoneGap and js/css3, and have recently started using the iPad's larger screen size to make specific adjustments to my layout.
I added an iPhone only section in my css with
#media screen and (max-device-width: 480px) {
and an iPad only section with
#media screen and (min-device-width: 481px) {
and they seemed to work fine on my desktop when I was debugging (using chrome, both in win and mac, and safari in mac).
When I built my app in xCode, and ran it on the device, it seems as though all the rules inside those sections are ignored completely, and my layout is all wrong.
Is there some trick I should use, in order to make this work for me?
It is important that you add the viewport to the head of your html document:
<html>
<head>
...
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
...
</head>
<body>
...
</body>
</html>
Also see:
CSS Media Query Orientation Change not working PhoneGap
Can you try
#media only screen and (-webkit-min-device-width: 481px) {
for your iPad only section and get back to me?