WordPress.org

Ready to get started?Download WordPress

Forums

Add to home screen WP Plugin
IPhone5 (10 posts)

  1. h3p315t05
    Member
    Posted 1 year ago #

    When I open the web app on my IPhone 5 it opens with black bars (based on the IPhone 4 and earlier Aspect ratio)
    Is there a solution to fix this?
    My Site:
    http://www.diekopffuessler.de/

    http://wordpress.org/extend/plugins/add-to-home-screen-wp/

  2. varvil
    Member
    Posted 1 year ago #

    I'm having the same issue on iPhone 5.

  3. tulipwork
    Member
    Plugin Author

    Posted 1 year ago #

    Hi!

    Sorry but I don't see the bug. Could you please provide me a screenshot of the problem? Or enable bottom nav for instance?
    Thanks.

  4. varvil
    Member
    Posted 1 year ago #

    Sure thing!

    Here's a side-by-side screenshot:
    http://pickpea.ch/OtLj

    The left is the one running in "web app" mode... the right is the regular mobile site in Safari. Make sense? Thanks!

  5. h3p315t05
    Member
    Posted 1 year ago #

  6. tulipwork
    Member
    Plugin Author

    Posted 1 year ago #

    @varvil and @h3p315t05, did you solve the problem? Sorry but I don't have an iPhone5 so it's a little difficult for me to work on this bug but I will fix it this month.

  7. varvil
    Member
    Posted 1 year ago #

    @tulipwork I have not solved the problem yet, however, I haven't spent much time with it. There are so many non-iPhone 5 users out there, not too many people notice.

  8. Kernel Debugger
    Member
    Posted 1 year ago #

    This is due to the old use of the following meta-tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    Take note of this variable: "width=device-width

    This variable has to be removed from this plugin, and more importantly: Any instance within your theme. Your responsive theme or plugin may have this included. Take the time to download your entire theme folder and search for the variable in question, don't just change the variable for this plugin!

    Now for the fix, you can use the following line, or change the last variable if you want users to have the ability to zoom in, it's optional but recommended to leave as is.

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

    It's a simple fix. I actually installed this plugin and was forced to resolve this issue on my own, and then decided to incorporate everything manually without the use of the plugin. If you would like an example i have it running on one of my sites: HERE

    Remember to set the expire as well, 1440 is a good timeframe. This way visitors will only see the notice once every 24 hours.

  9. h3p315t05
    Member
    Posted 1 year ago #

    @Kernel Debugger Thank you
    but where can I find content="width=device-width,..." I want to delete it but i can not find this in the Plugin files or could you provide the updated file?
    Tank you

  10. Kernel Debugger
    Member
    Posted 1 year ago #

    You can try the following code with this plugin, but this works with the original script by cubiq without the need for a plugin. Please note that it's up to the author to fix the plugin in it's current form, but the following fix should be all you need while using the plugin in it's current state. You can try this meta tag in your header.php to see if it's all you will need for the fix:

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

    If that does not work, you can easily use the original script and the following edits, but you would have to remove the plugin.

    The following code for placement in your theme/header.php contains everything you will need for the css, icons and startup images. This has to be inside your head tag:

    <link rel="stylesheet" href="pathto/add2home.css">
    
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-title" content="MYAPPNAME">
    
    <!-- iPhone -->
    <link href="pathto/57.png" sizes="57x57" rel="apple-touch-icon">
    <link href="pathto/320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <link href="pathto/114.png" sizes="114x114" rel="apple-touch-icon">
    <link href="pathto/640x920.png" rel="apple-touch-startup-image" sizes="640x960" media="(device-height: 480px)">
    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="pathto/Default-568h@2x.png">
    <!-- iPad -->
    <link href="pathto/72.png" sizes="72x72" rel="apple-touch-icon">
    <link href="pathto/768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <link href="pathto/748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <!-- iPad (Retina) -->
    <link href="pathto/144.png" sizes="144x144" rel="apple-touch-icon">
    <link href="pathto/1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <link href="pathto/1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    Make sure the above code is places before any javascript for more efficient loading of your site. Now for the script part, staying inside head but after any other css you may have place the following code:

    <script type="text/javascript" language="javascript">
    var addToHomeConfig = {
    	animationIn: 'bubble',
    	animationOut: 'drop',
    	lifespan:10000,
    	expire: 720,
    	touchIcon:true,
    	returningVisitor:true
    };
    </script>
    
    <script type="application/javascript" src="pathto/add2home.js"></script>

    Modify all "pathto" variables and don't forget to change "MYAPPNAME" to a name for your web app (Limit 12 chars)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic