I'm basically wondering if it was possible to create a functionality similar to this site: http://www.howtogomo.com/en/#gomo-meter
I want to add some kind of feature on my website that will allow visitors to check to see how their websites looked on a mobile device like an iPhone or Android phone.
You could fire up the android emulator from the android sdk , then using android debugging bridge fire up the following command
adb shell
am start -a android.intent.action.VIEW -d http://stackoverflow.com
then follow the following blog
http://android.amberfog.com/?p=168 , to take screen shot .
No. It looks like this site renders the website on the server side, and then sends down an image of this to your browser.
If you are interested only in Android and iPhone (and similar smartphones with browsers based on webkit) then you could try a similar approach to http://iphonetester.com. This uses a frame embedded to simulate the size (in pixels) of an iPhone. Note, that even though these browsers may be based on webkit, it doesn't mean their implementation is the same - see http://www.quirksmode.org/webkit.html for variance across different webkit based browsers.
This won't work if you want to stray to other non webkit based browsers.
Related
recently i've found this plugin can preview many device of Android or iOS device in one installed apps,
gif of the plugin is at https://github.com/aloisdeniel/flutter_device_preview
does react native has something like this?
I know there's some similar plugin like Expo and Appetize but i need something like this,
i mean i can preview of many device in my apps, not installing my app on many devices.
I think Apptize seems to be the most similar option available.
flutter_device_preview is certainly a more practical/simple solution. You change the parameters or device, the app is rendered instantaneously. However, it provides a first-order approximation, as said in flutter_device_preview repo:
Think of Device Preview as a first-order approximation of how your app
looks and feels on a mobile device. With Device Mode you don't
actually run your code on a mobile device. You simulate the mobile
user experience from your laptop, desktop or tablet.
But with Apptize you will be able to run a native app, with no approximations, using a the true mobile-OS on any PC/Mac/Linux OS via web. But of course, has some limitations (currently 7 devices only), and has another purpose.
Here you can generate an iframe to start the testing:
https://appetize.io/docs#embed-your-app
i am currently a mobile web application with jquery mobile. Is there a way of testing the application with an emulator that works for ipad, ios, blackberry, android, symbian and other major os on my local machine without connecting to the internet or using a real phone or hardware.
You may be interested in the ripple project. Currently its a chrome extension for emulating different devices. Sure it has shortcomings but it can be very useful for certain situations.
http://ripple.incubator.apache.org/
To avoid connecting to the internet: run your server on localhost
To avoid using actual hardware, use the emulators that come with the SDKs for the platforms you're interested in. But at first, just use the computer browser; I'd recommend Safari, as it is based on WebKit, like iOS and Android use.
One thing I tend to do is use FireFox with user agent switcher plugin. This allows you to configure a series of user-agent identifiers in your browser to 'fool' your jQuery mobile website into thinking it's dealing with particular devices.
if all you want is to load a mobile url and see how it looks on different phones you could try this site
http://www.synthphone.com/
We have an existing web site, and I've been asked to test its compatibility with mobile browsers.
I've installed the Android SDK onto my desktop PC. I'm able to view my localhost site in the emulator, and I have identified a number of glitches in the page layout which occur in the Android browser.
But since none of these issues occur in any desktop browser, I've been struggling with how to debug them. For example, in Firefox, it's very easy to use Firebug to see what stylesheets have been appies and to adjust them on the fly to see how it affects the layout. But I haven't found a way to do anything similar on the Android emulator.
The question is, short of trial+error, how do I go about working out what is causing those layout issues? Does the Android browser (or the Android SDK) have any kind of tools that are useful for debugging CSS? If so, how do I use them?
[EDIT] I haven't found a solution to this, so I'm throwing open the doors to the bounty hunters...
Weinre is probably the closest to what you're looking for:
If what you're looking for is something that allows you to tweak layout in realtime it should make you happy.
https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US
https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US
https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US
I found several options that appear as though they should work for you if an emulator/simulator will suffice or at least get you started. The benefit to this is that the Chrome Developer Tools appear to work with the add-ons!
Personally, I would much prefer to do this on actual Android hardware. In usage a touch screen handset is quite different to even the most accurate emulator; things such as gamma, pixel density, performance, touch interaction (are your links big enough?), portrait/landscape orientation and even the fact you hold it in your hand makes it quite different to the desktop experience. If you want to see how well your site works on mobile/Android, get a cheap second hand device to test on!
As for the debugging; I always include my own "log" function which creates a div#console if the firebug/browser console is unavailable. This works reasonably well for debugging on a handset with the caveat that it covers part of the content. You can then print out the current style of an object with something like
log(window.getComputedStyle(document.getElementById("myobj"));
Note: The above will not work in IE.
You may have already seen this, but the SDK Documentation Site has some basic information on developing and debugging web apps on Android:
Web Apps Overview
Debugging Web Apps
Hope that Helps!
I don't know how you detect a mobile device but I detect a client with the user agent. Because of this I can simply send a different user-agent string to test CSS which works fairly well.
For Firefox I use User Agent Switcher. Additionally I use the Web Developer tool not only to view all settings but also the Resize option to simulate the viewport width.
Apple's Safari has a developer extension and within also a User Agent Switcher. You can add your own User Agent string.
Chrome provides tools for doing this now. Just visit:
chrome://inspect/
With your device connected and ADB running - you can then use all of the Chrome web element inspection tools. This works with the browser, but also with any app that renders in a WebView (e.g. Cordova).
I want to test android mobile based pages on browsers like chrome or mozilla. Is there any plugins available so I can directly test them on these browsers without running them on device or emulator?
I created this chrome extension to help test. It's not a perfect replacement for actual device testing, but it's a start.
https://chrome.google.com/webstore/detail/mobile-tester/elmekokodcohlommfikpmojheggnbelo?utm_source=chrome-ntp-icon
This site shows you one possible way to do it.
http://techie-buzz.com/tips-and-tricks/emulate-mobile-browser-in-firefox.html
Once you have your user agent set you can just resize the window to be phone screen sized.
On Mozilla Firefox, you can use Selenium IDE to emulate clicks, typing and other actions. Personally, I have never tested it for mobile web applications.
http://seleniumhq.org/
I'm working on a javascript framework that generates webkit browser pages which emulate a native app for Android & iPhone.
I'm using an iPhone emulator (iBBPhone -- very nice) to see how my pages would look on the iPhone and iPad. I was curious if there was something besides the Android SDK phone emulator that would simulate the Android browsing experience. I'm using desktop Google Chrome right now as a "pretend Android" browser but I'm not sure how alike they really are.
The Android emulator that ships with the SDK is a bit too slow to fire up on my box to be of great use in what I'm doing (even when starting up a saved image), and I was curious if there was anything else out there that simulates Android browsing. Thanks!
I think this Firefox plugin will let you display the site as it would show up in several different types of browsers. I know it supports iPhone so I imagine it will do Android as well. This page also talks about some other Firefox plug-ins that may be useful to you.
Chrome has a nice add-on named Ripple that does the job nicely I've found. http://ripple.tinyhippos.com/
These guys pretend to meet this need. Might be a good idea to check it out.
http://www.browserstack.com/mobile-browser-emulator