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>
Related
My iOS Application contains some .html files, .jpg files in project itself. And show them via webView.
My image files are high-resolution but when it added to html files with tag and check them with iOS simulator zoom in... images became blurred so that I can't read text on them.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="initial-scale=1.0; maximum-scale=20.0; user-scalable=yes">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="m.ritz.css"/>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script src="scrollview.js"></script>
</head>
<body>
<img src="tong.png" width="500"/>
</body>
</html>
My code has nothing special... But I can't find the reason... help me~
You appear to be setting a specific width (resolution) for the image within the HTML. If the stored image has a greater resolution than that requested, the browser will down-sample the image to the requested resolution. This process can introduce image artefacts, blurring etc.
Try creating an image file which is equal in resolution to that which you wish to display. This should remove the need for the browser to reps ample the image leaving you with a nice sharp image.
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.
I'm using Twitter Bootstrap with the responsive CSS for a web-page designed to run in a UIWebView.
I want the page to look the same on all iPhone with the exception of images which should be doubled in resolution for the retina iPhones, but take up the same "real estate".
I have successfully added the following to my style.css to swap in and out the right images:
.normalres { display:block } /* or anything else */
.retinares { display:none }
#media all and (-webkit-min-device-pixel-ratio: 2) {
.normalres { display:none }
.retinares { display:block }
}
I use these in the following context:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content"">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-responsive-mod.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h5>Why this phone app?</h5>
<img class="pull-right normalres" src="img/iphone.png">
<img class="pull-right retinares" src="img/iphone_retina.png">
<p>Blah Foo Bar</p>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
Where the two images are 150px wide and 300px wide respectively.
However I'm experiencing a problem with the retina iPhone. The correct image is loaded but rather than it being pulled to the right (and the text flowing around it), which happens great on the non-retina iPhone, the image is stretched to the full width of the browser and nothing flows around it. Therefore it looks different to the non-retina version.
I believe this is something to do with Bootstrap thinking the retina iPhone is low res (320x480) like the normal iPhone and then seeing the rather large retina image (320px wide) and getting the layout wrong.
I think I have to tell Bootstrap responsive to treat the retina iPhones like 640px wide devices and not like 320px wide devices, but I don't know which media queries in responsive.css to change and how to change them.
I had a similar issue where I wanted the iPhone browser to render a portait viewport at a higher resolution than the default 320px. The OP appears to be asking this question:
I think I have to tell Bootstrap responsive to treat the retina
iPhones like 640px wide devices and not like 320px wide devices, but I
don't know which media queries in responsive.css to change and how to
change them.
The fix I used was to modify the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
I was then able to render at a width of roughly 400px. To achieve 640px, simply make the initial-scale value 0.5. Note this will affect all mobile-like devices, not just retina iphones, so you need to test this with multiple devices.
I used some javascript to see what the iphone window width was via:
$("#screenWidth").text($(window).width());
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
and adding some HTML to the page:
<div>screen width: <span id="screenWidth"></span>px</div>
I cannot for the life of me figure out why there are scroll bars appearing on my iframe Page tab. The width is set at 500px, after knocking it down 5px at a time from 515px. There are no margins, and the height setting is on "fluid." When I view the html page that the iframe is showing directly, there is no extra white space, so it looks like Facebook is adding white space (a margin or pad?) on the left side of the iframe. The odd thing is that the scroll distance has remained the same as I've narrowed the page down from 515px to 500px. Further, the "fluid" option for the height does not seem to be applying to the iframe, so I can't use the hidden tag in my CSS or half of my content is chopped off.
Is this an issue for anyone else, or am I just doing something wrong? I'll post the code for the page below.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script language="javascript" src="facebox/facebox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header">
<img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left" />
<img src="head_images/ymca1.jpg" align="right">
</div>
<div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
<div id="content1"><img src="images/cent_loc3.jpg" vspace="5">
<img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10">
<img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6">
</div>
<div id="content2"><img src="images/jorg_loc3.jpg" vspace="5">
<img src="images/ren_loc3.jpg" width="240" height="216" vspace="10">
<img src="images/whit_loc3.jpg" vspace="5">
<img src="images/camp_loc3.jpg" vspace="5">
</div>
</div>
</body>
</html>
UPDATE: I found a bit of code that got the iframe to resize properly and get rid of the scroll bars. However, this seems to have caused my Facebox implementation to get messed up. It doesn't appear Facebox recognizes the change in screen position to change the center for Facebox, so it is popping up at the top of the page instead of the current center of the screen.
I had a similar problem where I had vertical and horizontal scrollbars being shown even when they were inactive (in Opera and Firefox, while in IE and Chrome the page was shown without the scrollbars). I had "fluid" height and width selected in the application settings. The problem finally disappeared when I reverted the height setting to "settable" and used the FB.Canvas.setSize function again.
To me it seems that Facebook's "fluid" setting for the height isn't working correctly for all browsers at the moment, maybe try setting it back to settable and going from there.
go to https://developers.facebook.com/apps/YOUR_APP_ID/advanced then
scroll to Canvas Settings then set Canvas Width and Canvas Height as you wish
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