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
Related
I am working on converting my existing MVC website to be Mobile friendly. I am having issues when clicked on links, it is showing empty page. If I remove following links in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
Then it works fine but I loose all the styling and the text on webpage displays very tiny.
I am using Opera Mobile emulator for testing.
The links are local and are like "localhost:62234/Articles/10".
Just to give some more background I am converting my Framework 4.5 MVC website to be Mobile friendly. I have added all the libraries needed and main page works fine. I am having issues when links are pressed on main page. Initially clicking on links was doing nothing, then I did some research and discovered that I have to add tag rel="external" to the links to make them work. Now links work but displays empty page. Any help is greatly appreciated.
Here is solution I found which solved my problem finally.
Here is how my code looks now..in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type=”text/javascript”>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script>
I found some more information with this problem Here.
Hope this helps others
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
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]
On the zepto project website i see no version of IE as being supported, not even 9.
I am considering using zepto in a webapp (not mobile) but i want to support IE 9+
Is that possible? What features / methods of zepto do not work on IE9?
Out of curiosity I just loaded up the following page and tested in current versions of Chrome, Firefox, Safari and IE9. In all but IE9 I was greeted with the alert() message. IE9 gave me no alert and contained two errors in the console. Here's the code I used, with the Zepto library in the same folder.
<!doctype html>
<h1>Zepto Browser Support Test</h1>
<script src="zepto.min.js"></script>
<script>
$(function () {
alert('Zepto Ready Successful!');
});
</script>
So, unfortunately for your web app, if you are trying to support IE9, it doesn't look like Zepto is going to work for you.
Although, what the good folks at Zepto encourage if you are trying to reach IE users is to fallback to jQuery. They even give you the code to do so.
If you need to support Internet Explorer, you can fall back on jQuery. Note that conditional comments are no longer supported starting on IE 10, so we recommend the following document.write approach:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
I found this in the Zepto docs near the top of the page.
Hope that helps and good luck!
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?