I have a problem: There are HTML5/CSS3 mobile frameworks on the market like Sencha Touch and Phonegap which can use the multi-touch gestures of the iPad/iPhone, Android, etc.
That's working fine, I can test it. But now I need to know what's about Multi-Touch displays based on a Windows 7 OS. Are there also multi-touch capable in a webkit-based webbrowser like Safari or Google Chrome?
On a normal PC with mouse / keyboard I can do tap, double-tap, etc. but of course no pinch (zoom a picture with two fingers). Is this possible on a Win7 multi-touch display?
Does anyone know that or can test it? There is a demo:
http://dev.sencha.com/deploy/touch/examples/kitchensink/
-> Events
Doing a two-finger zoom there must be a "pinch" output. On the iPad, there is one, on the normal PC, I can not get it. But it is only possible on a Safari, Chrome, perhaps FireFox 4 webbrowser, because IE8 FireFox 3 does not support HTML5/CSS3 very much.
Best Regards.
Firefox 4 supports multi-touch, see here. However, the Sencha-touch only really supports webkit browsers, and doesn't work with firefox so you might have to try the Starlight browser, however it is so old (well over a year!) that it might not work with Sencha either...
Related
when i'm trying to login to Cloud 9 IDE on smartphone I get only "Dashboard loading" message. Why? What difference is between mobile and desktop browsers in this case? Mobile devices are fast anougth today and have gigabites of RAM and big High-res screens. Same browser engines.
Mobile devices typically require touch support and responsive layout, which can be more difficult when it comes to an IDE. Keyboard support can be another challenge.
I wish to implement the suggestion in this post:
Visual Studio 2012 Mobile Device Emulators
but Opera Mobile Emulator seems to no longer come in a Windows version. Anyone else experiencing this issue?
Yes, that's not just you.
People at Opera forums discovered a direct link to the Windows version:
http://www.opera.com/download/get.pl?sub=++++&id=35131
Considering that the link in the article on this topic has no mention of the Opera Mobile Emulator, I concluded that the desktop version is no longer supported. However, all major browsers have a built-in mobile emulator in the developer tools.
For Opera, these are the steps to access it:
Select the tab with the web page to be tested
Open Menu > Developer > Developer Tools or CTRL + SHIFT + I
Select the "Toggle device toolbar" icon at the top left (looks like a phone next to a tablet)
Select the device from the first drop-down menu on the toolbar. It will be "Responsive" by default, or the last device used.
It's a similar process on other major browsers, like Chrome, Firefox and Edge. Comparing to physical devices I'd say it's reasonably accurate for testing layouts. It doesn't have the latest phones like iPhone 12 at this time, but you can add a custom device by specifying the viewport height and width.
My understanding is that each browser tests how it would behave on its own mobile version, which means, it's best to test it on the developer tools on all supported browsers. On this topic, there are tips and links to commercial testing tools on the MDN article on cross browser testing. My main take away is test a lot, and fix or provide fallback solutions.
i am trying to set up an application with GWT. The problem is that Firefox and GWT not handling Windows 7 touch gestures properly. When using Firefox on an sample GWT page i am not able to do everytime touch gestures handled by Windows. Normally Windows 7 converts those touch gesture into keyboard shortcuts, but with Firefox they work like 20% of the time...
With Chrome and IE 9 there are no problems.
Does anyone have suggestions?
maybe this answer and below comments may help on clarifying various issues related to the problems above: https://stackoverflow.com/a/24942720/1915920
Are there any add-ons to test an HTML page to see what it will look like on a mobile device? I'm developing with PhoneGap but Eclipse emulator is too slow to refresh it all the time so I want to have a browser extension that make screen resolution like on mobile.
If you care only about the screen size, Firefox 15 (currently Beta, release coming up in two weeks) has Responsive Design View in the Web Developer menu that allows you to adjust "screen size". For example, you can select 360x640 (nHD resolution) and have a look at your page.
However, mobile browsers do custom adjustments to web pages and these adjustments depend on the browser used. For example, Firefox Mobile does something called Font Inflation. You cannot reproduce it in a desktop browser, you have to actually run Firefox Mobile for that. The problem: mobile browsers will only run on mobiles, even Mozilla stopped supplying Firefox Mobile for the desktop after they switched to the native Android UI.
Edit: Starting with Firefox 33, there is a Firefox OS simulator built into Firefox (thanks to Tomek for pointing me into this direction). To start it, open WebIDE, then click "Select Runtime" and choose "Firefox OS 1.3." This will start the simulator, all you need to do then is clicking the Firefox icon (for me it's a blue one, not the usual orange). There you are, you can test any website in a real mobile browser, right on your desktop.
Firefox OS simulator can do the trick: Just install it. Run it - and run the browser inside. :)
I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.