mobile

Displaying 1 - 3 of 3

Web viewports for mobile responsive websites

mobile web responsive css
May 16, 2016

What is a viewport? You may have seen the meta-tag named "viewport" on newer mobile-friendly websites. The mobile (iOS) version of Safari introduced the "viewport meta tag" and "scale" on the viewport for mobile (scale optionally being one of the special values minimum-scale, maximum-scale, and user-scalable).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

A viewport is like a logical window. You are on one side of the window looking through to the...

Embed a YouTube video player and control it via JavaScript

youtube javascript mobile safari
May 14, 2016

YouTube has long made it easy to share and embed videos into websites by giving you the HTML code to just copy and paste wherever you like. Over the years, different technologies have been used to play videos on the web, from Flash object elements to pure HTML5. YouTube's newest API for adding videos to web pages takes care of the technology, automatically choosing the best delivery method on a user by user basis.

YT did have something called the "YouTube JavaScript Player API" but this is out of date so don't use it. Instead use the new...

How to detect a swipe touch event on mobile browsers with JavaScript

javascript mobile swipe
May 14, 2016

Browsers have supported various mouse-based events like clicks, down to the detection of when the mouse button is down and when it's released. You can know the coordinates of the mouse cursor, all in JavaScript. Mobile interfaces have brought some new gestures beyond what desktops provided. One big set of such UI events is from the smartphone's screen allowing touch and even multi-touch. Multitouch allows more types of UI events.

Many mobile apps support swiping, not just as a way to move a visible object around thescreen but applied for the whole screen. Tinder uses left swipe and...