build.phonegap android分歧

Question

I am creating a mobile project with jquery mobile. I wrote these codes. It works perfectly on safari (mac-yosemite) and PhoneGap emulate (emulate.phonegap.com). But when I debug on build.phonegap.com and run on my android device (Samsung Note-4 Android 5.0), the text size is too small. I write project codes and put screen shot here. What is the problem, can you tell me ?

Script

<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>  
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="stil.css" />

Style

html, body{
    margin:0px; 
    padding: 0px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
a{
    text-decoration: none;
}

/*INTRO PAGE*/
#intro-page #content{
    margin: 0px;
    padding: 0px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

#intro-page #content img{
    width: 100%;
    height: auto;
    z-index: 5;
    position: fixed;
}

#intro-page #content #giris-yap{
    z-index: 10;
    background: none;
    border: none;
    position: fixed;
    bottom: 25%;
    width: 100%;
}
#intro-page #content p{
    z-index: 10;
    position: fixed;
    bottom: 15%;
    color: black;
    font-family: 'Myriad Pro';
    font-size: 20px;
    text-align: center;
    width: 100%;
    text-transform: capitalize;
    box-shadow: none;
    text-shadow: 0px 0px 0px black;
}
#intro-page #content #giris-yap h2{
    color:black;
    text-align: center;
    text-shadow: 1px 1px 1px white;
    font-size: 32px;
}
/*INTRO PAGE END*/

HTML

<div data-role="page" id="intro-page">
        <div data-role="content" id="content">
            <img src="img/bg.jpg" alt="">
            <a href="#main-page" data-role="button" id="giris-yap" data-transition="flip" data-shadow="false"> <h2> GİRİŞ YAP </h2></a>
            <p data-shadow="false"> Bu deneyimi yaşamak için hemen giriş yapın :)</p>
        </div>
    </div> <!-- intro-page-end -->

Android ss -> http://i60.tinypic.com/zsscbs.png

Answer 1

This is most likely due to the device pixels being different in all the three devices. have you set the meta tag?

<meta name="viewport" id="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Answer 2

Here is the full codes between head tags @Dilberted

<meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="stil.css" />