Viewing 9 replies - 1 through 9 (of 9 total)
  • I’m having the same issue on iPhone 5.

    Plugin Author Ziyad Bachalany



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

    Sure thing!

    Here’s a side-by-side screenshot:

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

    Plugin Author Ziyad Bachalany


    @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.

    @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.

    Kernel Debugger


    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.

    @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

    Kernel Debugger


    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',
    	expire: 720,
    <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)

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘IPhone5’ is closed to new replies.