What HTML APIs are available for touch screen devices (e.g. tablet PCs)? I notice that GMail's iPad interface (and other mobile interfaces) doesn't scroll down in a normal web browser (pretending to be an iPad via a user-agent hack). How can one access this API on a PC?
I have a school full of tablet PCs that aren't wonderful in tablet mode due to lack of application support, but there looks to be an increasing number of web-based apps that will fill this gap.
In most cases, the webapps are using touch-based javascript events (touch, touchstart, touchend) which (for obvious reasons) are not implemented on Desktop browsers.
Check out PPK's compatibility table for details: http://quirksmode.org/mobile/tableTouch.html.
He also has a demo which shows the touch events in use: http://quirksmode.org/m/tests/scrollayer.html. There's a link on that page for a "variant" that works on desktop browsers. That's the one you need.
You can use, as you've already stated, UserAgent, to present content laid out specifically for certain devices.
For each, device, you'll have to read its documentation on how to write HTML in order to make the device behave as you want.
For example, here's how you would do it for an iPhone/iPodTouch. Here's for iPad. Similarly, depending on the device you have, you will be able to find proper documentation.
There is an awesome open database that can help you get device information based on user agent. It's called WURFL.
Related
Link to app
I've written the media queries to make the app responsive and they looked fine when I'm viewing them via Chrome DevTools. First screenshot is from Chrome DevTools, second is from my iPhone X:
Iphone X has a screen size of 325x812, which is the first difference.
Secondly, G Chrome Dev is an emulator, which means it only simulates what a page will look like on a specific device. It does not account for hardware and software (say which browser you're using). They use different rendering engines, so deviations are bound to occur.
I checked the URL, you are using react to make your page responsive which takes care of your application to be visualize properly on all the screen size.
You have design correctly only, you don't want your users to open desktop view in mobile.
Do you know is it possible by means of bootstrap 3 classes or some other its features to hide some html when there is no mouse at device which is browsing my site?
There are three possible solutions to this, none of which will work completely:
User agent detection - compile a list of user agents of devices that you know are touchscreen (without mouse) and use navigator.userAgent to check if they're being used. This may not work because people can change their user agents in some mobile browsers, and it is almost impossible to find a list of every possible touchscreen user-agent.
Use feature detection libraries like Modernizr. This answer explains it well. However, these detect for touch events, but some desktop browsers have these, so that would tell you something was touchscreen when it wasn't.
Detect the height and width of the window. Most mobile devices have small screens, but some touchscreen devices (like tablets) can have screens as big as some computers, which means it wouldn't always work. You can use window.innerHeight and window.innerWidth (this wouldn't work in IE). You can also use CSS media queries here.
I've got a html5 website/webapp. I only want people to view this website/webapp from their mobile phone i.e. iphone, android, blackberry.
If they try to visit the website/webapp from their desktop browser, It should display an error message as the website/webapp is only meant for the mobile phone.
Is this possbile? any tips?
Thanks
There's no way to check for sure wether a site is on mobile or desktop. HTML is made to be device agnostic.
you can do browsersniffing BUT
user_agents are easily changed in several browsers
you need to make sure to keep your user agent->mobile/desktop mapping up to date
you could do mediaqueries and conditionally display a query that way, but with the large array of formfactors available today there's no clear line to draw that way either.
Both methods will be prone to misidentification.
Quite Frankly, I'm kinda puzzled why you would want to prevent people from accessing your site. Why do you care if someone accesses your site from a desktop instead of a mobile device?
A site designed for mobile will work on a desktop just fine (it's the other way around that might be problematic)
Grab the script for the language you prefer from here:
http://detectmobilebrowsers.com/
Works for me.
You could use media queries, on the page and check the device width on which the page is width. Say if the page is viewed on Desktop, You can show a Message that this App is compatible with Mobiles Devices only and Not Desktops. similarly this should apply for tablets as well and this message can be customized.
Are you using any serer side technologies (ASP.NET, PHP) to generate the page? If so, you can perform your logic on the server side and return different content (like your message) on the desktop requests.
This is usually done by reading the user-agent. Are you ok with a desktop user over-riding their user agent to simulate a mobile browser and viewing the mobile content?
My apologies for a more "theoretical" question, though I suppose this is more of a "state-of-the-industry" question: I'm curious about the options available for building a website meant to target multiple platforms (desktop browsers + touchscreen devices, like tablets and smartphones).
Technologies like CSS3 Media Queries give us the ability to format our content based on screen size (among other things), which is great - but what about other functionality? For instance, touch events - these can still get very sticky depending on what device you're targeting, etc. So is it possible to build one site to target all of these platforms? Or is it still necessary/better to use device detection scripts to redirect to versions of the site meant for touchscreens (Apple-devices or otherwise)? Or perhaps, does it depend on what you want to do? Is there a line drawn that, once crossed, would require a separate version of a site to be made? Anyone care to share their experiences?
It all depends on how complex your website features will and and how they differentiate from the offline or online version.
Sometimes it's better to make a totally different version of your website and redirect to it, sometimes, a few touchevents calls on the page will not make any different for desktop users, while mobile will see something different.
One good case to look at is the WP-Touch plugin for Wordpress. While you have a version of wordpress for regular browsers, it tweaks PHP into delivering a totally different and mobile experience for the mobile user.
If you have the patience, resources and time to make a proper mobile website from your regular one, do it! If you don't, a different stylesheet and some touch events properly coded can seal the deal
I am considering a project in which workstations, connected to a central server display various content under the control of a central timeline.
Requirements are that the kiosks could have various compositions of monitor and an extended desktop. This screen space would be use to display images, movies or various mosaics of images and movies.
For example, a machine with 3x3 monitors might be configured to display video in the lowest right four screens, a title on the top three videos and whatnot elsewhere.
I am figuring out how to create the viewer. I think that sticking to web technologies I know well would be good and using JavaScript for the timeline engine sounds easy.
As for codecs and video drivers I think I would stick with Chrome, Css3 and Html5, I think I can require Chrome and Windows 7.
There are a few concerns, though.
Will there be performance problems considering video split on different monitors on an extended desktop?
Will it be pixel predictable to size and stack divs so that images fit inside a physical monitor or monitor group?
Thank you all.
A great solution for this is Adobe AIR. You are already talking about HTML, might as well check that out.
The nice thing is that AIR provides facilities for kiosks. Check out this link:
http://www.adobe.com/devnet/flex/articles/flex_kiosk.html
Just replace everything there that says Flex with HTML/Javascript. The platform functionality is available to both technologies.
As for stretching a browser or AIR app across multiple screens, I believe you would have to manually position the window yourself. I.e., if you maximize an app window on a multi-monitor setup, it expands to the size of the monitor only, not the entire viewable area. You likely will have to manually position/resize in Javascript.
As for using Chrome as a client, see this thread:
http://www.google.com/support/forum/p/Chrome/thread?tid=12bde481a208c4ca&hl=en
It doesn't look like Chrome supports a kiosk mode.
Browser shouldn't be a problem at all. Just remember the architecture - you'll need a server somewhere and each kiosk will be a client. Just set up a port/url for your app and there you go. Chrome has some features that allow you to prevent users from exiting the app. I forget the specifics, I believe it involves incognito mode and something
Company I work for does something a lot like this. We make 'apps' that run on iPad and another touch screen device called MSI (btw - one of the advantages here is the freedom of using different client platforms), but not in the typical Objective-C way. Theres a server with a LAMP stack and the client uses the browser.
Will there be performance problems considering video split on different monitors on an extended desktop?
I think more than multiple monitors what you really have is multiple clients. This is interactive to some degree right?
Will it be pixel predictable to size and stack divs so that images fit inside a physical monitor or monitor group?
Yes. I don't really do artsy design and display details so I can't comment on specifics. But I don't think this is too hard - especially if all the clients are similar. Majority of this would be dictated by CSS.
EDIT - took a look a what we do on chrome. between running on start up, using kiosk mode and incognito (both can be runtime flags) and the regular F11 kind of full screen, you should be pretty much there
Will there be performance problems considering video split on different monitors on an extended desktop?
IMHO screen space does take a little toll on your video processing. You will need a relatively good video card to support such huge amount of displays. I am a user of dual screen on ATI Radeon HD 5750 (1GB), and I can do intense gaming on my main screen while read news and be on twitter on my other screen.
Will it be pixel predictable to size and stack divs so that images fit inside a physical monitor or monitor group?
DIVs can be easily styled and positioned using CSS. You can define the number of pixels for both width and height. And if you do your storyboarding and layout design, everything should fit in your window.
However the trouble for you is that I assume you're stretching the browser window across the 3x3 screen. I recommend you to instead have one browser window per display.
I've tried that Chrome can full screen on each display without exiting-full-screen-mode on the others.