I am trying to view an image on the iphone that is generated using the html5 canvas.
The browser page detects the iphone then redirects to the iphone specific page.
The image is displayed properly.
Now here is the problem.
The iphone page is a stripped back version of the browser page. When stripping it back I found that when I removed 2 completely unrelated scripts from the page, the image appeared cropped on the iphone (the bottom of the image appeared cropped.) Just to be sure. I substituted the scripts with other scripts. Regardless of the scripts involved, when 2 scripts were present the image would display properly.
I also found that if the iphone page without the scripts was loaded directly (not redirected) the image displayed correctly. It was only when redirected from the browser page to the iphone page without the scripts that it didn't work. Reloading the iphone page also displayed the image correctly.
Incidentally, I've noticed a similar cropping affect when I change the orientation of the phone to landscape and back but I'm not sure if this is related at all.
I'm guessing the cropping has something to do with when the canvas is generated, but I'm not sure. This has me pretty stumped.
Anyway, here is the code for the iphone page.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>canvas image thingy majig</title>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link type="text/css" href="/iphone.css" rel="stylesheet" />
<link type="text/css" href="/style.css" rel="stylesheet" />
<script type="text/javascript" src="/MOB.js"> </script>
</head>
<body onload="init();">
<section id="drawingArea">
<canvas id="canvas"> </canvas>
</section>
<input class="reset" type="button" value="Clear" onClick="window.location.reload()">
<script type="text/javascript" src="/cmmn/sclbkmk.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Does anyone have any ideas about what is going wrong?
EDIT: Just for reference I was using an iphone 4 with firmware version 4.1(8B117).
It seems that it is a problem with timing.
I modified the above code so that
<body onload="init();">
is now
<body onload=setTimeout("init()",100);>
I haven't checked the best time for the settimeout yet,but 100 does the job so far.
Also this kind of negates the point of stripping down the website (I was trying to optomize loading times.)
Related
I gave a try to Bootstrap but I'm bit surprised about one thing is that it seems that the Glyphicons are kinda really slow to be loaded or displayed.
I have the feeling that even the carousel is faster to show up.
However, it does not seem that be that slow on other websites.
Therefore, I guess I must have done something wrong, but I do not see a lot of differences with the code used for displaying glyphicons online, is there any way to fix it up?
But so far since I'm trying to run everything locally, it should fast as the light, nope? It takes two seconds for the glyphicons whereas the rest it's instantaneously displayed.
Is there any way to have a better way to measure how fast something can be displayed onto the screen (rather than just using my end-user feeling), please let me know.
Just starting to do web front-end development, please be indulgent.
Here is below the code I am using to display just one glyphicon-home:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>My Page...</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Favicons... -->
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="faviconOthers.ico" sizes="196x196">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if IE 9]>
<script src="html5shiv - 3.7.2/html5shiv.min.js"></script>
<script src="respond - 1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" ></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" ></script>
</head>
<body>
<i class="glyphicon glyphicon-home"></i>
</body>
</html>
I found out what was the wrong, the bottom line resided in the bootstrap.min.css.
Reason is that a while ago I used an online bootstrap customizer cause at that time I havent installed any CSS preprocessor yet. It was enough to change a couple of colors.
However, I did not know that the customizer added a couple of links about where to get certain fonts online which I would rather like to avoid since I'm in China and some websites are really slow to access.
E.g.
#font-face{font-family:'Glyphicons Halflings';
src:url(http://bootstrap-live-customizer.com/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot);
I have a problem on the initial load of my angular APP on mobile safari, it hangs with blank page for nearly 2 minutes, while on other browsers,it works perfect, even on MAC safari and IPAD safari.
At a first guess, maybe my app has too many js files. So I concat
them(11 files) into 3 files, and the issue was resolved. Seems mobile safari has some limitation of the number of js files on the first page. So I tried 4 files, and 5, and it seems 4 is the max number accepted by mobile safari.
My question is: Is there really any limitation for mobile safari on the first page's number of js files? Or did I misuse angularJS or HTML5,or anything else. Because I think if safari really does, it seems awkward, and it should be carefully documented which I never searched on google.
The original code of my first page looks like:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<base href="/"/>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles for this page -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
</head>
<body class="blog-body" ng-app="blog" ng-controller="blogCtrl">
<div ng-include src="'modules/blogPublish/blogNavBar.html'"></div>
<div ui-view autoscroll='true' class="anchor"></div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../modules/blogPublish/blog.js"></script>
<script src="../modules/blogPublish/ui_effect.js"></script>
<script src="../modules/appError/appError.js"></script>
<script src="../modules/common/underscore.js"></script>
<script src="../modules/common/alert.js"></script>
</body>
</html>
Mobile Safari uses an interesting feature called HTTP Pipelining, which may not be supported by your web server software. See Safari Sends Two HTTP Req. Same Time/Socket
I'm writing a mobile web app with jQueryMobile and I put in AngularJS to handle data binding. But this introduces routing problems on mobile devices. Below is the minimal code I could write to reproduce the problem. Everything works OK on Chrome on desktop, but when I try the same page from my android device I get the nasty "Error loading page". Problem can be fixed by using data-url for navigation but there's catch. I also need to package it up with phone gap. This means html is loaded by file:// and direct navigation(data-url) doesn't work(I tried)
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter-1.2.0.js"></script>
</head>
<body>
<div data-role="page" id="main">
<a data-role="button" href="#sub">sub</a>
</div>
<div data-role="page" id="sub">
<p>sub page</p>
</div>
</body>
</html>
Upon clicking the "sub" button user should be directed to hostname/#sub and it is on Chrome but weird things happen on android and browser is routed to hostname/#!/%23sub
I guess this is URL encoded?
Also I should point out that by removing just the two script refenrences for angular and for JQM-angular adapter everything works(and no databinding of course).
i tried removing angular-jquery adapter and everything works as if by magic.
also no issues with angular and jquery clashing.
This question may sound familiar but not quite the same as asked before.
I have a CSS that is sent to browsers with no javascript functionality (referenced by a link tag). I have another CSS which is used by the ajax version of the site and is injected to the page by JS. Each of these files are relatively big (gt 200K). I don't want the JS enabled clients to download both files.
I can do this easily using noscript tag. But that has the limitation in cases where the user is behind a proxy that filters script tags. So the browser ends up with no CSS altogether.
<html>
<head>
<noscript><link rel="stylesheet" type="text/css" href="nojs.css" /></noscript>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
</script>
</head>
<body></body>
</html>
My attempt to use HTML comments in a non-standard way worked in Chrome but failed in FF:
<html>
<head>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
document.write('<!----');
</script>
<link rel="stylesheet" type="text/css" href="nojs.css" /><!-- -->
</head>
<body></body>
</html>
Both browsers parse the HTML correctly (not sure if IE and Opera would too), but FF downloads the nojs.css in all cases (without actually applying it when JS is enabled).
Any ideas?
The prefetching mechanism of Firefox seems to ignore the comment and preloads the CSS file, but only if it's referenced as a link element.
Use a CSS import statement instead to suppress prefetching of the unused file:
<html>
<head>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
document.write('<!--');
</script>
<style>
#import url(nojs.css)
</style>
<!-- -->
</head>
<body>
...
I am testing iUI for mobile web apps. Instead of putting all content into a single HTML page, I am using the Ajax hyperlink technique described by Joe Hewitt here. However I cannot get this to work in Chrome, although Joe Hewitt's own Digg demo, which uses the same technique, seems to work correctly.
Here is the simplified source code:
main.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="main" title="Main" selected="true">
<li>Go to Screen #1</li>
<li>Go to Screen #2</li>
</ul>
</body>
</html>
screen1.html:
<div class="panel" title="Screen 1">
<ul><li>Hello 1</li></ul>
</div>
screen2.html:
<div title="Screen 2">
Hello 2
</div>
This works fine on Firefox (minus styling issue in screen2.html) but the links do not work on Chrome.
Any pointers?
The AJAX-based navigation used may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser. When I'm using jQuery Mobile, sometimes the Ajax hyperlink technique works, sometimes it doesn't. Although the same code works fine on Opera.
Looks like does not have anything to do with iUI, rather it is a Chrome issue that affects loading any local files via Ajax.
Here is another SO question related to this issue, this time showing up with JQuery:
Problems with jQuery getJSON using local files in Chrome
The accepted answer includes a link to the bug in the Chromium bug tracker.