I can’t run the app right on Samsung Galaxy S3 tab Lte

Question

I can’t run the app right on Samsung Galaxy S3 tab Lte

Asked 7 years, 10 months ago

Viewed 60 times

0

I’m in trouble and I believe it’s something or in framework7 I’m using for the layout or Android version compatibility issue.

I’m using the following frameworks and API:

Phonegap
framework7 (design material included)
jquery

config.xml

<?xml version='1.0' encoding='utf-8'?>
  <widget id="br.com.mentor.amjb" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Jorge Bichara</name>
<description>
    App Mobile Candidato
</description>
<author email="[email protected]" href="http://w3com.com.br">
    Mentor
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="17" />
<preference name="android-maxSdkVersion" value="23" />
<preference name="android-targetSdkVersion" value="17" />   
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<icon src="icon.png" />
<platform name="android">
    <preference name="orientation" value="portrait" />
    <icon density="ldpi" src="www/res/icon/android/drawable-ldpi/icon.png" />
    <icon density="mdpi" src="www/res/icon/android/drawable-mdpi/icon.png" />
    <icon density="hdpi" src="www/res/icon/android/drawable-hdpi/icon.png" />
    <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi/icon.png" />
    <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi/icon.png" />
    <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi/icon.png" />
    <splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen/default.png" />
    <splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen/default.png" />
    <splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen/default.png" />
    <splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen/default.png" />
    <splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen/default.png" />
    <splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen/default.png" />
    <splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen/default.png" />
    <splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen/default.png" />
    <splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen/default.png" />
    <splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen/default.png" />
    <splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen/default.png" />
    <splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen/default.png" />
</platform>
<platform name="ios">
    <icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
    <icon height="114" platform="ios" src="www/res/icon/ios/[email protected]" width="114" />
    <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
    <icon height="80" platform="ios" src="www/res/icon/ios/[email protected]" width="80" />
    <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
    <icon height="100" platform="ios" src="www/res/icon/ios/[email protected]" width="100" />
    <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
    <icon height="120" platform="ios" src="www/res/icon/ios/[email protected]" width="120" />
    <icon height="180" platform="ios" src="www/res/icon/ios/[email protected]" width="180" />
    <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
    <icon height="144" platform="ios" src="www/res/icon/ios/[email protected]" width="144" />
    <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
    <icon height="152" platform="ios" src="www/res/icon/ios/[email protected]" width="152" />
    <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
    <icon height="58" platform="ios" src="www/res/icon/ios/[email protected]" width="58" />
    <icon height="87" platform="ios" src="www/res/icon/ios/[email protected]" width="87" />
    <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~iphone.png" width="640" />
    <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
    <splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
    <splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
    <splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />
    <splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
    <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />
    <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
    <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x~iphone.png" width="640" />
    <splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
    <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
    <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
    <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
    <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
    <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
    <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
    <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
    <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
    <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
    <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
    <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
    <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
    <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
    <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
    <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
    <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
    <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
    <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
</platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
  </platform>
 </widget>

The following occurs: .css is completely deformed, the font-icons does not appear all, really do not know what to do I’ve tried to change version equal to the device and nothing , only works on other phones and a tablet I have here, if someone can give Force, thanks. Android version of this device is 4.2.2(API 17)

The layout break problem may be related to CSS class addressing. It doesn’t have much to do with config.xml, try compiling using "Android Studio". Usually acquisitions are replicated to a folder called /Platforms/ at the root of the project.

– Ivan Ferrer

2016/08/31 at 21:37
www is only project editing folder.

– Ivan Ferrer

2016/08/31 at 21:42
To better help you, publish the code of your file index.html containing the links of the CSS classes. or main.html

– Ivan Ferrer

2016/08/31 at 21:57

1 answer

Browser other questions tagged jquery apache-cordova

You are not signed in. Login or sign up in order to post.

by Jacob de Oliveira • **301** points · Answer 1 · 2016-09-01T21:52:30+00:00

Follows the index

<!DOCTYPE html>
<html class="android android-4">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Dr. Jorge 43</title>
<link rel="stylesheet" href="css/framework7.material.colors.min.css" />
<link rel="stylesheet" href="css/framework7.material.css" />
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css" />
<link href="css/galeria.css" rel="stylesheet" />
<link rel="stylesheet" href="css/blueimp/blueimp-gallery.css" />
<link rel="stylesheet" href="css/blueimp/blueimp-gallery-indicator.css" />
<link rel="stylesheet" href="css/blueimp/blueimp-gallery-video.css" />

</head>

<body>
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">

    <div class="content-block">
        <div class="list-block">
            <div class="card-content">
                <div class="list-block media-list">
                    <ul>
                        <li class="item-content">
                            <div class="item-media">
                                <img class="redondo" src="img/candidato.jpg" width="44" />
                            </div>
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title"><strong>Dr. Jorge Bichara</strong></div>
                                </div>
                                <div class="item-subtitle">Partido Verde</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <ul>
                <li>
                    <a href="index.html" data-view=".view-main" class="index item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"> <img class="icone" src="svg/home.svg" t=""> Inicio</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="sobre.html" data-view=".view-main" class="sobre-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"> <img class="icone" src="svg/sobre.svg" alt=""> Sobre</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="propostas.html" data-view=".view-main" class="propostas-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"><img class="icone" src="svg/propostas.svg" alt=""> Propostas</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="noticias.html" data-view=".view-main" class="noticias-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"><img class="icone" src="svg/noticias.svg" alt=""> Notícias</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="galeria.html" data-view=".view-main" class="galerias-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"><img class="icone" src="svg/galeria.svg" alt=""> Galeria</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="videos.html" data-view=".view-main" class="videos-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"> <img class="icone" src="svg/video.svg" alt=""> Vídeos</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="contato.html" data-view=".view-main" class="contato-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"><img class="icone" src="svg/contato.svg" alt=""> Contato</div>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="envia_foto.html" data-view=".view-main" class="envia_foto-link item-link close-panel">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"> <img class="icone" src="svg/contato.svg" alt=""> Fale c/ o candidato</div>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#" data-view=".view-main" class="back item-link close-panel alert-text-title">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"> <img class="icone" src="svg/info.svg" alt=""> Créditos do App</div>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#" class="confirm-ok">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title"><img class="icone" src="svg/fechar.svg" alt=""> Fechar Aplicativo</div>
                            </div>
                        </div>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</div>
<!-- Views-->
<div class="views">
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar theme-teal">
            <div class="navbar-inner">
                <div class="centerlogo sliding"><img src="img/logo.png" alt=""></div>
                <div class="right">
                    <a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a>
                </div>
            </div>
        </div>
        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
            <!-- Page, data-page contains page name-->
            <div data-page="index" class="page bg_inicial">
                <!-- Scrollable page content-->
                <div class="page-content">

                    <div class="content-block-title">Welcome To My Awesome App</div>
                    <div class="content-block">

                        <div class="logo_home">
                            <img src="img/candidato2.png" class="logo-resize" alt="">
                        </div>

                        <div class="row">
                            <!-- Each "cell" has col-[widht in percents] class -->
                            <div class="col-50 icon_home">
                                <a href="noticias.html" data-view=".view-main" class="white noticias-link-atalho item-link close-panel">
                                    <img src="img/noticias.png" alt="">

                                    <p>Últimas notícias</p>
                                </a>
                            </div>

                            <div class="col-50 icon_home">
                                <a href="galeria.html" data-view=".view-main" class="white galerias-link-atalho item-link close-panel">
                                    <img src="img/galeria.png" alt="">

                                    <p>Galeria de fotos</p>
                                </a>
                            </div>

                            <div class="col-50 icon_home">
                                <a href="videos.html" data-view=".view-main" class="white videos-link-atalho item-link close-panel">
                                    <img src="img/video.png" alt="" />

                                    <p>Últimos vídeos</p>
                                </a>
                            </div>
                            <div class="col-50 icon_home">
                                <a href="contato.html" data-view=".view-main" class="white videos-link-atalho item-link close-panel">
                                    <img src="img/contato.png" alt="" />

                                    <p>Entre em contato</p>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 
            <div class="toolbar theme-gray">
                <div class="toolbar-inner">
                    <a href="#">  <img class="link" src="img/logo_mentor.gif" alt=""></a>
                </div>
            </div>
            -->
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/default.js"></script>
<script type="text/javascript" src="js/push.js"></script>
<script src="js/blueimp/blueimp-helper.js"></script>
<script src="js/blueimp/blueimp-gallery.js"></script>
<script src="js/blueimp/blueimp-gallery-fullscreen.js"></script>
<script src="js/blueimp/blueimp-gallery-indicator.js"></script>
<script src="js/blueimp/blueimp-gallery-video.js"></script>
<script src="js/blueimp/blueimp-gallery-vimeo.js"></script>
<script src="js/blueimp/blueimp-gallery-youtube.js"></script>
<script src="js/blueimp/vendor/jquery.js"></script>
<script src="js/blueimp/jquery.blueimp-gallery.js"></script>
<script src="js/jquery.mask.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#cpf').mask('000.000.000-00', {
            reverse: true
        });
    })
</script>
</body>

</html>