Software Archive
Read-only legacy content
17061 Discussions

inappbrowser zooming Android ok Apple

Matteo_P_
Beginner
832 Views

Intel XDK 3759 Hello, first of all because of the work you are doing with XDK I really solved many problems.

I published last week an App with the plugin inappbrowser on Iphone and Android with the simulator so good.
But after publishing the store unfortunately I realized that with Android viewing on your web page is tremendous everything is small and to the left, for leggre is the page you have to zoom with your fingers.
Am I wrong or is just the plugin function that fails its task?

I tried both on the net and in the faq but can not find the solution seems that it happened just me, or do not write the right words when I try.

I decided to write to you.
Maybe you know why this happens? Thanks hope to hear from you soon.
Matthew

0 Kudos
10 Replies
PaulF_IntelCorp
Employee
832 Views

Usually this sort of problem is determined by the lack of or incorrect specification of the meta viewport tag. For example, taken from the hello-cordova sample app:

    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2">

And a more typical non-scaling tag, from another sample:

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

Also, the Simulate tab does not simulate a real device. You should ALWAYS test on a real device before submitting to the store. See > https://software.intel.com/en-us/xdk/docs/intel-xdk-simulator-limitations < for more details.

0 Kudos
Matteo_P_
Beginner
832 Views
Thanks for the answer, I'm sorry for the ignorance, in which file and folder must make these changes?
Thank you very much
0 Kudos
PaulF_IntelCorp
Employee
832 Views

Matteo -- please look at the index.html file in most of the samples. In particular, check the "hello cordova" sample and see the reference I provided in the first code block.

0 Kudos
Matteo_P_
Beginner
832 Views

Excuse me but I tried this

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2">

and this

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

It did not work

 

0 Kudos
PaulF_IntelCorp
Employee
832 Views

What does the call to inAppBrowser that you are using look like?

0 Kudos
Matteo_P_
Beginner
832 Views

I did not understand the question,
try to respond in the index button code

<p align="center">
    <div class="button-grouped flex widget uib_w_3 d-margins" data-uib="app_framework/button_group" data-ver="1">
        <a class="button widget uib_w_5 color2" data-uib="app_framework/button" data-ver="1" id="button2">
            <h3>Titolo</h3>
        </a>
    </div>
</p>
0 Kudos
Matteo_P_
Beginner
832 Views

Hello and thank you to assist me.
I saw that even with the demo

sample-in-app-browser-master.zip

file if you land on a responsive page all right, altrimente for example I added a page with iframe within the sample files.

http://www.html.it/guide/esempi/guida_html/frames/iframe/indice.html

iphone tightening of the width which shows the sample page potri put my things to work on Android and everything is small and you have to zoom with your fingers.

And this is not possible . I'm going out of your mind !!

0 Kudos
PaulF_IntelCorp
Employee
832 Views

Matteo -- I recommend that you do not use App Designer for such an app, you need to write this without the aid of App Designer, directly in HTML5. That way you'll have more control over the results. App Designer is not meant for encapsulating web site pages.

0 Kudos
Matteo_P_
Beginner
832 Views

I understand, however, on apple iphone works perfectly.

0 Kudos
PaulF_IntelCorp
Employee
832 Views

Please read this blog > https://blogs.intel.com/evangelists/2014/09/02/html5-web-app-webview-app/ < especially the section titled "Defining the WebView App." Also, if you are testing on an Android 4.x device, make sure you've selected "optimize with Crosswalk" in the Build Settings.

0 Kudos
Reply