I am working on a website and the homepage is very javascript/jQuery heavy. Because of this there are all sorts of issues on mobile devices when loading the page. Mobile Safari crashes and on other devices the page freezes completely.
I would like to know if it is possible to disable an external javascript file, if the website detects that you are using a mobile device.
You have two main choices:
At the beginning of the external javascript file, check what kind of device you're on and skip executing the rest of the file if desired.
Don't statically load the javascript file. Instead, check what kind of device and then dynamically load the JS file if not on a mobile device.
That said, what you really ought to do is fix your javascript because there's no reason you can't have javascript that works on both desktop and mobile devices. If mobile Safari is crashing that's because you have issues in your JS that you should fix, not because you can't run JS on mobile Safari.
Thank you for the response, I will probably try option 1. The problem is that it is using a parallax scrolling effect via Stellar.js which I have heard does not work well with mobile browsers since scrolling works differently.
Related
I had previously asked a question about my test project.
The dropdown which is most likely using boostrap.min.js works only in Android currently. We've changed the location of the folders so that the linked boostrap js is now like this: <script type="text/javascript" src="../js/bootstrap.min.js"></script>. Notice the ../ part was added. There are no problems reading the file on non-IOS based devices. When we check on the Iphone, the dropdown doesn't work. So I thought maybe its how Safari reads the CSS or Javascript?
Here is the site btw: http://star-allianz.com/en/en/index.html
I don't own an Iphone5 or Iphone6+ so its hard for me to test things.
Note: The missing files aren't a problem because the dropdowns still work in my Android phone.
PS: I've tried using online IOS device simulators and the built-in Google Chrome simulator. The dropdowns work even when I load the site. However, when using a real IOS device, they don't. Keep in mind, it works in Android. Also, I've never made any changes to bootstrap.min.js.
I have an Android - Cordova Project.
When index.html (main page) page is loaded, on Android 5.1 (real phone) only shows a white screen.
When I minimize app by the phone's home button and go back again, using task manager, the page loads normally as expected.
I found a similar question, where someone argued about WitheList plugin which I added to my project.
Answers are likely about to make a delay using setTimeout, which I applied, with no success.
I have some local css and js files in index.html.
In onDeviceReady.js file, I call load method to set the html content for a div, add some click button functions and re-size some divs in setTimeout and an addEventListener.
What's the reason for this?
Waaaauuu!!!
I upgrade my jquery to v2.2 and my problem solved!. It is a new challenge and new experience.
I start debug with a real device with Android 5.1.1 (Samsung S6) and see that there is an error: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
But after search I don't find any useful answer (like this).
I guessed that one or more javascript file(s) make this bug (white screen problem), so I remove all js files tags from index.html and add one by one.
Yes, my jquery file version cause problem. I upgrade it from v1.11 to v2.2.
I make a website in php at backend and HTML,CSS at frontend.Now the requirement is to make it compatible for also mobile.I am thinking to use JqueryMobile but I am confuse that same layout work for both or make different for both.
Is layout make by JqueryMobile cover both ends?Is I make separately JqueryMobile layout?
According to the jQuery Mobile description:
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
Then, the same layout will work in both mobile and desktop browsers. Despite that, you should consider how your website looks in desktop browsers if you want to provide different functionalities in each platform.
See here.
jQuery mobile works for both mobile and desktop, but whether or not it looks good on mobile will also depend on your layout in CSS.
I have a Jquery mobile app that became completely broken on iOS the moment I add offline support via an application cache manifest as described here:
https://github.com/jquery/jquery-mobile/issues/6494
There is lots of discussion about this but I have yet to find a clear answer as to whether I can have offline support on mobile safari and preserve the nice looking transitions of Jquery Mobile.
Can it be done?
I finally got it working. This was what I did:
Apply prefilter as per Using the Application Cache
change any href="#" to href="index.html"
change any dialog("close") to $.mobile.changePage('index.html')
The only weirdness remains is that in order for it to work offline the app must be launched twice after being added to the home screen.
The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?
Opera has an option to view pages as through a mobile device. I've found it useful in the past.
I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.
One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.
You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.
It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.
BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.