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.
Related
I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag.
When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2:
The Problem:
When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no does not apply. Fixed items like the nav and footer appear as 100% as seen in the image.
Landscape is fine and all other devices / OS' are working as expected.
The website is Utilidata.com. Has anyone seen this behavior or know of a fix?
<meta name="viewport" content="width=device-height, initial-scale=1, user-scalable=no"/>
UPDATE: I'm seeing reddit people freaking out about iOS 9's viewport issues. However their shrink-to-fit=no solution doesn't fix.
Make sure to incorporate below changes to meta > viewport:
Remove width=device-width and height=device-height
Also set
*-scale to 1.0001 from 1.0.
-
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
Worked well for me! Good Luck!!!
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:
Problem Demo
The problem is visible on IOS device (tested on iPhone 5). When viewing the page in landscape mode and switching to portrait mode, white space on the right side of the page shows up.It should be connected with mobile browser that is supported by iOS devices (Safari).
I tested on Xperia V for example and this problem is not there. Do you have any suggestions on how could i fix this issue?
The template is build on bootstrap and uses owl carousel in the slider. Any help would be appreciated!
add this to your head section:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
i had a similar issue with a kindle and this helped me out... hope is works.
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 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?