Question

我正在用jquery mobile创建一个移动项目。我写了这些代码。它完美适用于safari（mac-yosemite）和PhoneGap模拟（emulate.phonegap.com）。但是当我在build.phonegap.com上调试并在我的Android设备（Samsung Note-4 Android 5.0）上运行时，文本大小太小。我在这里编写项目代码并放置屏幕截图。有什么问题，你能告诉我吗？

脚本

<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" />

风格

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 - ＆gt; http://i60.tinypic.com/zsscbs.png

Answer 1

这很可能是由于所有三个设备中的设备像素不同。你设置了元标记吗？

<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

以下是头部标签@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" />

build.phonegap android分歧

2 个答案: