I was wondering what emulators everyone uses to test your mobile development, want to make sure I'm using the most accurate emulators/simulators.
I currently use the Electric Mobile Simulator from electric plum for iPad and iPhone simulation as well as Opera Mini and Mobile emulators. I have downloaded the Android SDK but have trouble making this work so am very dubious about the results I see on this.
I understand that using a real device to test my pages will merit the best results but Id also likes to have a decent emulator pack on my desktop just to give me a rough guide of how the development process is progressing.
All suggestions and feedback welcomed
Kyle
Get as many real devices as possible. Then, to ease the pain for mobile web development, hack something together like Shim: https://github.com/marstall/shim to coordinate all your browsing.
I use Opera Mobile Emulator with Opera Dragonfly as a debugging tool, which makes styling and scripting pretty easy 90% of the way. If running Opera (Mobile & Mini), you can connect your real devices to the developer tools window of Dragonfly - that's a great way to effectively scan your code.
The current commercial version of Electric Mobile Simulator states to render just as iOS. It actually comes very close. It basically is a Chrome fork - which works, because both Chrome and Safari are Webkit browsers. However, rendering pages that use flash fallbacks and other trickery might display differently on the simulator. EMS has built-in developer tools, which helps a lot finding those crummy css bugs. I use this tool a lot.
There was a free version of Electric Mobile Simulator, however it rendered most of the content equating to the operating system's browser (Can't find the version now however).
Android SDK is a giant. I used it before, and I doubt that it can offer you anything you couldn't achieve with Opera Mobile Emulator or Electric MS. It can be sluggish, slow responding - depending on the performance of your machine. However, simulating a device in Android SDK brings you very close to the real deal.
But in the end, you definitely need to test on real devices. Not all bugs show in simulators, also you can't precisely simulate touch events. We started collecting used mobile devices (iPhone3, iPad1, older Samsung models and so on); and will continue doing so.
Summary: Nothing replaces testing mobile sites on real devices, but emulators can speed up development from the project's start until the middle of beta stage.
You could also use DeviceAnywhere. With DA you test on real devices.
Related
Hi I am building a weather app and I was using Firefox and Chrome inspect mobile views to check how they would look on mobile devices.
This is the link to my weather app:
https://fervent-albattani-911414.netlify.app/?city=Beijing
On my Firefox developer tool, the iPhone 12 landscape of this app looks fine like this:
But when I go on my iPhone 12 and put it to landscape it looks like this:
https://drive.google.com/file/d/1x_PNSlMpdu6RZjybLzx2aSJyoNF2CTS_/view?usp=sharing
How do I fix this??
The developer tool is an emulator not an actual representation.
But since emulators do not replicate the software or the hardware of the actual physical mobile devices, they have serious limitations, as Google acknowledges. Simply put, these limitations result in serious testing errors.
Google even admits their emulator fails to accurately duplicate the behavior of the GPU and CPU in the mobile device hardware.
But here are two additional big deficiencies in the Chrome mobile emulator that Google doesn’t mention:
Chrome and Firefox mobile emulators uses a different rendering engine than either iOS or Android .
This can be shown when emulating a web browser -the Chrome mobile emulator uses a different JavaScript engine from Safari as Chrome uses V8 while Safari runs JavaScriptCore/Nitro. These differences will have a large effect on your actual resolution.
Note: simulation is often best for apps and emulation for websites. (Cloud based simulators help reduce the negatives of using simulators.)
References to mobile1st
I have the following task:
Develop an html5 hybrid application for major platforms (ios, android, wp8) with some native device features like push notifications and local storage.
The exact copy of this application should work in desktop browser, customers should use it as a mobile app 'preview'.
I am new to the HTML5 mobile development and tried only phonegap+jquerymobile, it had some performance issues.
Sencha, as I understand, is not compatible to desktop browsers.
Which set of tools would you recommend for such problem?
The framework we develop meets a lot of your requirements.
Have a look at qooxdoo Mobile:
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2F
It works on
IE 10,11
Firefox Desktop
Google Chrome Desktop
Windows Phone 8
Android 2.3+
iOS 5+
Blackberry OS
I would go with Sencha Touch + PhoneGap and optionally ExtJs for a full working version of mobile app unless some of the native features weren't unavailable.
They are awesome.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/tabs
I would like to add one more note about PhoneGap + SenchaTouch
Sencha touch is html5 framework which can work in webbrowser or to be packed to native.
If you dont need camera, coordinates and some other advanced tools you can pack it with native sencha compiler (but for WP8 you still need PhoneGap).
in build.phonegap.com you can create 1 build for free to compile you sources to wp8, android, iphone, bada and some other.
Sencha touch is well documented http://docs-origin.sencha.com/touch/2.3.0/
Same sources will be able to work (if you done it right :) ) on phone as native app or as javascript solution on web.
and probably last one sencha touch is light weight, in my case application which takes photos also it has geolocation feature for search product in compiled mode it has near 600kb.
We are developing a Sencha Touch 2 application which makes use of Phonegap to be able to install it as an application and access the storage of a device. This works really well on the iPad 2 and the iPad 3. However when we tried to run the application on an android device, the performance was very slow. The main elements which slowed down the system were lists and carousels. When we tried to test the same application through the chrome browser, the performance was on-par with that of the iPad.
Do you have any suggestions on what we can do to improve the performance on android, maybe even ditching Phonegap for something which works better. Or if we can force phonegap to run as a chrome browser.
Thank you for your time & help.
The problem you have here is that the Android browser does not use graphics hardware acceleration. This means that the standard tricks that Sencha (and other HTML5 libraries such as jQueryMobile, iScroll etc...) use to provide good scrolling performance, such as CSS 3D transforms to cause a your list to be rendered in a separate layer, which can then be translated in hardware, will not work on Android. Instead, list scroll will be performed entirely in software, which is going to be slow!
The Chrome browser, does however provide GPU acceleration. The Android device is more than capable of delivering a good HTML5 experience, it is simply that the standard browser does not take advantage of GPU hardware yet.
Unless you can force your end users to use Chrome (which I doubt), the only option is to degrade user experience, and deliver a slightly simpler UI for Android users.
For further details, see "IMPROVING THE PERFORMANCE OF YOUR HTML5 APP"
Try setting this flag in your AndroidManifest.xml :
android:hardwareAccelerated="true"
Update: Having now worked with ST2 more longer now the performance challenges on Android are just something you have to accept. There are many things you can do to avoid performance issues such as reduce listeners and events, keep your DOM light (below 2000 nodes) and generally avoid any CSS3 transformations and effects (these in particular don't perform well on Android)
Another thing to consider is rather than using the built in WebView you could use the CrossWalk browser and embed this in APK.
https://crosswalk-project.org
It adds a little size to your APK (15-20MB), but it performs better than the built in WebView and brings stability and consistency to a very fragmented platform. Consider the reality that every WebView on Android depending on device, vendor and OS version may be different in small ways. CrossWalk will allow you to have the exact same version across all Android 4.0+ devices and remove any device or vendor specific issues.
There is no silver bullet for performance on Android. Graphics acceleration won't improve the perform of pure javascript execution or DOM manipulation. If you want to understand why, then start here:
What's the difference between reflow and repaint?
Older Answer (may still be valid):
For ICS and above the following setting on the webview will significantly improve rendering performance for Sencha Touch on Android:
mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null);
However in my experience this will introduce artifacts into CSS rendering depending on the device and platform variation. I haven't specifically found a reason for this and I don't expect Google will resolve it as the webview component will be getting replaced with a newer and better version in Android 4.4.
https://developers.google.com/chrome/mobile/docs/webview/overview
I am about to start writing a web app for the latest smartphones using HTML5, CSS3 and JavaScript. I don’t need a framework so much as a library like jQuery.
I looked at jQTouch which is great for iPhone and apparently has support coming for Android too but I am looking to cover Blackberry device Software v4.6 upwards and WebOS 5 as well.
Does anyone have any ideas of alternatives to jQTouch or experience using jQTouch with Android's native browser, Blackberry's browser or WebOS native browser?
Well you probably have to use jQuery. In the beginning of October, the jQuery community will release a jQuery Mobile Version, where you can use all the advantages of jQuery within almost every mobile browser.
Check their site out: http://jquerymobile.com/
Sencha Touch is a possible alternative, but I have no idea how well it works on BB and WebOS. I'm afraid that you won't find something that works well with BB, since they have switched to a Webkit based browser only recently.
I did a project for Android and iPhone using jQTouch. There were times when I had to fiddle with the code to get it working correctly but as a whole I found that almost everything worked on iPhone and Android. Where I started having problems was that the Android browser doesn't have nearly as much support for CSS3/HTML5 (especially with animations) and the app ran much slower on android as the browser doesn't have hardware accelerated graphics. This was a while ago so hopefully it has matured a bit now.
PhoneGap seems to be a reasonable cross-platform framework that supports encapsulating web app type development into an iPhone/iOS app, as well seeming to support some of the other platforms you asked about (but I have tried it on those).
http://www.phonegap.com/
Hey this question is pretty general, but I'm wondering what the Javascript differences are in Mobile Safari and Safari for Mac.
I was under the impression that from a Javascript perspective they are the same, with only some differences in CSS/rendering. But I am experiencing a number of Javascript errors in Mobile Safari that don't exist in regular Safari on Mac.
Basically a number of calls to certain jQuery plugins are returning undefined values (according to the developer debugger in Mobile Safari).
The website that I'm experiencing these issues on has a very lousy front end that is riddled with validation errors, lousy JS and has an enormous amount of CSS attached. I have no doubt that this issue lies somewhere in this code, and I've never experienced issues like this before.
I'm just having trouble honing in on the problem, so any insight/links as to the general differences in Javascript engines would be much appreciated.
Javascript itself, the core language, is no different. There are a few significant differences in the DOM that appear undocumented, but mostly it is all the same. Here you can see some differences in events that you can handle.
The DOM differences I noticed had to do with measuring elements. For example getClientRects, at least for a Selection or Range, was not available. There are probably other things.
Before I add my two cents about differences in Safari depending on environment or build: the list of possible environments for Safari is bigger than just iPod, iPhone, iMac.
I am also dealing with: Safari for Windows (desktop) and Mobile Safari in iOS Simulator on iMac.
My jQueryMobile + PhoneGap app works nicely in Safari for Windows (desktop) and Safari on iMac, but it has the following problems in Safari on iOS Simulator on iMac Snow Leopard with XCode 3.x:
Google Analytics gets a "whitelist rejection" in iOS simulator.
My app hangs early on in the user's setup process through another problem
That other problem could be any of:
tags placed after element may not be loading
properly
calls to localDb may not be coming through
jQuery's events (pageinit,click,etc) may not come though in the same way