Home/ Questions/Q 6697567
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:28:30+00:00

Below are three pictures showcasing the problem. I will go into more detail right

  • 0

Below are three pictures showcasing the problem. I will go into more detail right after.

First run, watch the size increase in the next picture

Everything grew. The header text and size of the controls upon selection

This is the way it should be, everything is the proper size

As you can see, something is causing the page to render improperly at first. I can’t figure out what it could be. I’ve reordered the scripts, and the styles. No matter what I do, the first time you run the app the size of everything is very very small, and the only way to correct it is to tap the search bar.

What makes it worse, is that if you look at this in a browser, FireFox or Chrome, before deploying it to the device it renders perfectly. Only until it is on my device does it shrink on first use. And that is the kick, if I hit the home button and come back to my app, it’s fine. If I force stop and launch my app, it’s small again.

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/jquery.mobile-1.0rc1.css" />
    <script type="text/javascript" charset="utf-8" src="Scripts/phonegap-1.1.0.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.0rc1.min.js"></script>
    <script type="text/javascript" src="Scripts/common.js"></script>
</head>
<body>
    <div data-role="page" id="home" data-title="Search">
        <div data-position="fixed" data-role="header">
            <h1>
                Search
            </h1>
        </div>
        <div data-role="content">
            <form action="#" method="POST">
                <input id="search" type="search" placeholder="Search" />

                <button type="submit" data-inline="true" data-icon="search" id="searchWikiMedia">
                    Search</button>
            </form>
            <div id="refineSearch">
                <ul data-role="listview">
                </ul>
                <span id="error"></span>
            </div>
        </div>
        <div data-position="fixed" data-role="footer">
        </div>
    </div>
    <div data-role="page" id="result" data-title="Results">
        <div data-position="fixed" data-role="header">
            <a href="#home" data-transition="slide" data-direction="reverse">Search</a>
            <h1>
            </h1>
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer">
            <h4>
            </h4>
        </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this to your between your <head> tag’s:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
or simply
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

    Some further reading: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

    • 0