Menu
I was working on a jQueryMobile website and this is what I made:
<body>
<p class="tekst">De "Snelle" methode, berekent alleen op het lichaamsgewicht, en is alleen nuttig voor mensen met een normaal vetpercentage maar zelfs is deze methode onnauwkeurig.</p>
<div class="ui-grid-c">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:65px">Gewicht (kg)<input type="text" name="m1kg" id="m1kg" value=""></div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1Cut" value=""></div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:65px">Onderhoud:<input type="text" name="m1Onderhoud" id="m1Onderhoud" value=""></div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:65px">Aankomen:<input type="text" name="m1Bulk" id="m1Bulk" value=""></div></div>
</div><!-- /grid-c -->
<button id="btnmethod1">Bereken</button>
<p class="tekst">De Formule van Harris-Benedict, berekent op lichaamsgewicht,lenge,leeftijd en activiteitsniveau. Een vrij betrouwbare methode om te gebruiken.</p>
</body>
Now, when I open this website on my mobile phone (Iphone 4), the screen is not proper resized and you have to zoom in to read what is there, example:
As you can see you can barely see what is going on until you zoom in. The grid uses 25%/25%/25%/25% to display the blocks but for some reason the width of the blocks/textboxes (?) are too large to fit in, what I want is when you open the website there is no possibility to zoom in and the buttons should perfectly fit in, does anyone know how to accomplish this?
337
Viewport meta tag must be added into a HEAD so jQuery Mobile applications can be viewed on mobile devices:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no"/>
Also you will need to redesign your page look, if you properly display this on mobile device (in my case Samsung Galaxy S3) your input boxes will become very short.
You can test it here: http://www.fajrunt.org/viewport.html , just open it on your iPhone. If it is too large you can modify scale, if you go below 1 it will look smaller. For example you can try 0.75.
Your final code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<p class="tekst">De "Snelle" methode, berekent alleen op het lichaamsgewicht, en is alleen nuttig voor mensen met een normaal vetpercentage maar zelfs is deze methode onnauwkeurig.</p>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:65px">Gewicht (kg)<input type="text" name="m1kg" id="m1kg" value=""/>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1Cut" value=""/>
</div>
</div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:65px">Onderhoud:<input type="text" name="m1Onderhoud" id="m1Onderhoud" value=""/>
</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-e" style="height:65px">Aankomen:<input type="text" name="m1Bulk" id="m1Bulk" value=""/></div>
</div>
</div><!-- /grid-c -->
<button id="btnmethod1">Bereken</button>
<p class="tekst">De Formule van Harris-Benedict, berekent op lichaamsgewicht,lenge,leeftijd en activiteitsniveau. Een vrij betrouwbare methode om te gebruiken.</p>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
