I'm trying to fix a display issue on my jQuery mobile site. It looks great in other browsers but when viewed on the iPhone in Safari, everything is super large and you cannot shrink the page with pinch.
For example a simple h2 element takes up most of the screen.
<meta name="viewport" content="width=device-width;
height=device-height; user-scalable=no" />
<title>Start</title>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=yes" />
<link rel="stylesheet" href="/static/css/android.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="https://www.google.com/jsapi?key=ABQIAAAApPeof0WyN6ORT7NeNop5OxQhS8mdepxW5-6qUjpskYmhafYcLRQjyW8D0bRdsydbD1maEkV9aSDKrw" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
// Check for iPhone4 Retina Display
if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
}
}
</script>
</head>
<body>
<div data-role="page" id="start">
<div data-role="header" data-theme="a">
<h1>Start</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<h2>Adventure with:</h2>
<div id="buttons">
Spam Master
CREATE NEW FOO
</div><!-- /buttons -->
</div><!-- /content -->
</div><!-- /page -->
</body>
You're almost there.
Try setting the initial-scale, that should do the trick.
<meta name="viewport" content="width=default-width, initial-scale=1" />
Related:
jQueryMobile viewport not working in Windows Phone
changing viewport based on device resolution
Hide Safari address bar and footer
jquerymobile and screen resizing
Is it possible to use jQuery to read meta tags
Having trouble using jQuery to set meta tag values
Yeah I know there is some reading to do ;)
To enable pinch: user-scalable=yes
Related
well i've done the space shooter tutorial and run the compiled webgl app in a html file, but I noticed that the top screen area is cut off I can scroll down and see the rest of the game app, the bottom shows as expected and if I press the fullscreen button, obviously the game shows off entirely on the screen but I want to show the entire screen in the browser not in the fullscreen mode, another thing I noticed is that if i zoom out the page to 75%, the screen in the browser shows as expected but if I zoom in to 100%, for example, that's when the top screen area gets cut off, I was thinking of giving a default zoom via js or css, but someone recommended not to depend on that, so what can i do??? please help...
with 100% zoom
with 75% zoom
here is the code for the html file:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | SpaceShooter</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 600px; height: 900px;"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">SpaceShooter</div>
</div>
</div>
</body>
</html>
I'm having problems with my HTML and jQuery Code. I was wondering if someone could tell me what's wrong with it. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<!-- Color Scheme -->
<!-- Beige: #eee8cd; Green: #008b8b; Blue: #203471; -->
</head>
<body>
<div id="MainPage" style="background:#008b8b;color:#203471" data-role="page">
<div style="background:#008b8b;color:#203471" data-role="content">
<p style="background:#008b8b;color:#203471"><img alt="" src="Images/Header.png" style="width:100%" /></p>
<p style="background:#008b8b;color:#eee8cd">The content for the main page is here</p>
<a style="background:#eee8cd;color:#203471" href="AboutUs.htm" data-role="button">About Us</a>
<a style="background:#eee8cd;color:#203471" href="ContactUs.htm" data-role="button">Contact Us</a>
</div>
<div style="background:#203471;color:#eee8cd" data-role="footer">
<h4>Main Page Footer</h4>
</div>
</div>
</body>
</html>
There are two problems that I am having problems figuring out:
1) When I put this code on my web server and navigate to it via my iPhone it is fine when the phone is held in the vertical position. When the phone is moved into the horizontal position though, the buttons seem to be displayed over the text and are not workable. Any ideas on how to resolve this?
2) I tried to create a custom stylesheet.css and link to it via the class attribute of the various tags. This would not work so I had to put the inline code (for example:)
<div style="background:#203471;color:#eee8cd"
Can someone show me how to create a stylesheet.css with these attributes and "tag" them in the HTML so that this works?
Thanks So Much.
Well, you've got a link to jQuery where your link to your CSS should go. Check out www.codecademy.com !
I've separated inline css to its own and seems to render fine.
Play with this fiddle here http://jsfiddle.net/kVqWJ/
You can include css files in your html file many ways:
1)
<style type="text/css">
//your style here
</style>
2)
<link rel="stylesheet" type="text/css" href="css url here">
A quick googling will help. The Mozilla developer network is a great place to start.
Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});
I am writing a home-screen web app with a video element in Mobile Safari. For usability reasons, I would prefer that swiping on the screen does not make the page scroll. I can successfully prevent swipes from scrolling using the following code. However, if a user swipes on the video element, the page scrolls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>no scroll</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
};
</script>
</head>
<body>
<p>anything but the video will be stationary when swiped.</p>
<video preload="auto" webkit-playsinline id="video" controls height="100" width="100">
<source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>
I have tried adding code to prevent the video element from swallowing those events (inserted into the window.onload function):
var videoEl = document.getElementById('video');
videoEl.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
videoEl.addEventListener('touchstart',function(event){
event.preventDefault();
},false);
Is there a workaround for this? Am I addressing the problem the wrong way?
I'd recommend putting a shim on top, that is, a blank div with a higher z-index to catch the touch events. I don't have a chance to test now, but should be pretty easy to try out.
I am very new for iPhone web developer.
I started with reading Safari Web Content Guide.
Then I found that we can hide user interface for example address bar of safari.
Therefore, I followed the instructor. The result is not what I expected.
The address bar still show.
I put this meta tag in html file.
and this this my code
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello iPhone Web App</title>
<style type="text/css">
form{
width:100%;
}
#searchBox{
font-size:25px;
width:50%;
}
#send{
font-size:25px;
}
#containerTop{
text-align:center;
width:100%;
}
</style>
</head>
<body>
<form method="get">
<div id="containerTop">
<input type="text" id="searchBox" name="search" autocapitalize="off" size="15" maxlength="128" />
<input type="submit" id="send" value="ค้นหา" />
</div>
</form>
</body>
I am looking forward to your reply, thanks
"apple-mobile-web-app-capable" only works it's magic when you launch your WebApp after having saved a link to the Home Screen, and launch your WebApp from the new icon.
For regular web pages you need to scroll the Address Bar out of view using:
<script type="text/javascript">
window.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0,0); }, 100); }, true);
</script>
The Navigation Bar at the bottom of the screen is permanent for regular web pages, but is removable for WebApps (saved to Home Screen) using the "apple-mobile-web-app-capable" meta tag.