I'm building a mobile oriented web site.
New phones most of all use new browsers which support html5 and css3. Very often they have touch screens. Probably owner of iPhone4 or Galaxy does not bother about page size so much - so it IMHO it is a good idea to use jQueryMobile for such user.
On the other hand there are smartphones which are also have touch screens but screen resolution is too small (i.e. 240x320) to use jQueryMobile.
There are also a number of phones which do not have touch screens and also there are number of users who switch off Javascript to do not load js files and save their money.
I tried to use Modernizr to determine if mobile phone supports touchscreen but unfortunately Modernizr.touch only shows if a browser support it.
It is known to use CSS Media Query Modernizr.mq() to determine the screen size and load different css files base on it but this solution doesn't solve problem with switched off javascript and old browsers like IE8.
There is also a good article http://www.alistapart.com/articles/return-of-the-mobile-stylesheet but unfortunately it has basically ideas not implementation.
Question: I'd like to load jQuery mobile for smartphones with min-width 480px. Otherwise load default css. It is possible to implement this for as many as possible mobile browsers?
Answer (result code):
<html class="defcss">
<head>
<link href="/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content( "~/Scripts/yepnope.js" )"></script>
<script type="text/javascript">
//<![CDATA[
if (window.screen.availWidth > 450) {
document.documentElement.className = document.documentElement.className.replace(/\bdefcss\b/, '');
yepnope(['//code.jquery.com/jquery-1.6.4.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css']);
}
//]]>
</script>
I would look into something server side and generate the files needed, Take a look at:
http://code.google.com/p/mobileesp/
http://blog.mobileesp.com/
http://wurfl.sourceforge.net/
http://www.handsetdetection.com/
There are some client side scripts but I haven't used any of them yet:
https://github.com/sebarmeli/JS-Redirection-Mobile-Site
https://github.com/miohtama/detectmobile.js
Related:
Mobile detection
Also what about Tablets?
Related
How and where to put your own JS files in JQueryMobile web applications?
Some suggestions I found:
only in the first page of the web app, usually index.html
inside the JQM page
Which one is better approach?
After your jQuery Library and BEFORE your jQuery mobile library. I place all my script tags at the end of the body...but that's not a must...
<script type="text/javascript" src="jQuerySource.js">
<script type="text/javascript">
/*Your stuff*/
</script>
<script type="text/javascript" src="jQueryMobileSource.js">
Why?: Because when you're building your jQM application you're going to want your event bindings to be defined before jQuery mobile gets initialized and fires the 'mobileinit' event and your first page's 'pageinit' event.
Just put your script after the JQM script tag
Yeah, that's all
It is a good idea to use jQueryMobile javascripts from Google CDNs because of following reasons:
1. You can directly include minified version in your pages.
2. You save bandwidth cost
3. Most importantly there are good chances that the JS might already be loaded on your user browser's. Because many other web apps use them.
So you should use
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
So, if all your code is inside document.ready() ; you can use it at end [ which loads the page faster]
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.
My senior project is a web-based storytelling app to be viewed on iPad. The elements need to be touched with.
I was wondering if there was some sort of packaging service that will convert my pages into an independent app - I want to escape some of the features of Safari. Such as the address bar, tab bar, etc. I do not want people to be able to leave my project in the gallery.
Any ideas?
if you add this to your header:
<meta name="apple-mobile-web-app-capable" content="yes" />
you can then add to homepage and it'll remove the browser elements...but you will have to make the various page calls with ajax, or setting window.location...you can't just have traditional links (it'll reopen safari)
----------------------------edit:-------------------------------
Here's what I mean about window.location.
used to be linktext
now
<span style="text-decorate:underline;color:#00F;" onclick="viewPage('http://url');">linktext</span>
<script type="text/javascript">
function viewPage(p){
window.location=p;
}
</script>
Does anybody know of a way to make jQuery Mobile load only on pages with certain screen resolutions? I don't want jQuery Mobile to load if somebody is viewing the page from a desktop/laptop browser because I want to use HTML5 Boilerplate.
For example, if somebody visits my page from their iPhone, I want jQuery Mobile to format the site with the theme I have created, but if they view it from their desktop, I don't want jQuery Mobile to add all the extra tags and stuff.
Thanks
<script type="text/javascript">
<!--
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", "js/jqueryMobile.js")
if (screen.width <= 480) {
document.getElementsByTagName("head")[0].appendChild(fileref);
}
//-->
</script>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile/index.html";
}
//-->
</script>
This piece of script will recognize the screen size, in this case 699 px, and will then tell the server to load a different folder than the root. Just create a folder in on your server named mobile for your jquery mobile site and thats it. cheers!
jQM Docs:
http://jquerymobile.com/test/docs/api/mediahelpers.html
Note: This feature was deprecated in beta, and removed in 1.0rc1. We
recommend using CSS3 Media Queries instead. To support older versions
of Internet Explorer, check out respond.js, a fast & lightweight
polyfill for min/max-width CSS3 Media Queries.
If you still need this feature, you can find the code here:
jquery.mobile.media.classes.js
I am using a browser field to display a web page, however it takes about four times as long to load a page, as compared to the default browser on BlackBerry. I want to speed up this load time.
I found that using a cache can decrease the load time. I use the code from the BlackBerry support forum knowledgebase article "How to Implement a Web Cache for Your BrowserField2 Application", but there is no speedup.
Is there another solution or did I make a mistake in using the cache?
You can minify your code. Minifying code basically removes all excessive characters (mostly whitespaces) to make your file size smaller, thus take less longer to download.
HTML however is usually not minified. I highly suggest to minify your Javascript and CSS only.
Javascript minifier
CSS minifier
Try to reduce the file of images etc, playing with extension and quality. You can also create an alternative CSS that only applies for mobile devices, loading lower quality images (for the images that have been applied in CSS that is) by adding a media type:
<link rel="stylesheet" media="screen" href="default.css" />
<link rel="stylesheet" media="handheld" href="mobile.css" />
Apart from that, there's little you can do. You can't magically increase the download speed of any mobile device so you should try to reduce the size as much as possible.