I'm working on my mobile site, I already have this code:
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "android.html";
} // ]]>
</script>
which diverts android users away from the current page on to androids own dedicated page.
what I would like to do is the same thing but for an iphone / ipad. I would like iphone / ipod touch to land on iphone.html and ipad to land on ipad.html displaying different content for both. How can I do this?
thank you.
You can just expand your current approach to the other user agents:
var iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
var ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if(iphone){
document.location = 'iphone.html';
}
if(ipad){
document.location = 'ipad.html';
}
Related
Is there any viewport meta tag available for iOS 10 ?
I am facing zoom issue on my iPhone. I am using <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> and also user-scalable=no is not working.
It seems this meta is not taken into account anymore with iOS 10 RC.
Users are able to zoom in/out freely even when this meta.
I'm looking for a clean solution for that.
See disable viewport zooming iOS 10 safari?
fyi, It still works for home screen app
I have a fairly heavy GIS web-app that crashes when iOS devices with 1 Gigabyte of RAM try to zoom. After much experimentation, this is what works for me. Hope it helps. If anyone has any suggestions to improve this, then by all means enlighten us all! :)
// CSS (This prevents zoom on input)
input {
font-size: 16px!important;
}
// JavaScript (I use jQuery). This prevents pinch zoom.
var numTouches = 0;
$('body').on('touchmove', function(event){
numTouches = event.originalEvent.touches.length;
if(numTouches > 1){
event.preventDefault();
}
});
// And this prevents double tap zoom
var mylatesttap = new Date().getTime();
$('body').on('touchstart', function(event){
var now = new Date().getTime();
var timesince = now - mylatesttap;
if((timesince < 500) && (timesince > 0)){
// double tap
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
//alert('You tapped me Twice !!!');
}else{
// too much time to be a doubletap
}
mylatesttap = new Date().getTime();
});
This code was built upon samples from this post:
Detect double tap on ipad or iphone screen using javascript
I want to play an HTML5 video on the iPhone but whenever I try to, the iPhone automatically pops out in fullscreen when the video '.play()' is called. How do I play the video inline without the iPhone changing the UI of it like these:
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en (When you click "Start the 360 experience")
Edit: Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iPhone Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('vid').play()">Start</button>
<video id="vid">
<source src="/videos/tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
I'm working on a solution to this until Apple allows the "webkit-playsinline" to actually play inline.
I started a library here: https://github.com/newshorts/InlineVideo
It's very rough, but the basic gist is that you "seek" through the video instead of playing it outright. So instead of calling:
video.play()
You instead set a loop using request animation frame or setInterval, then set the:
video.currentTime = __FRAME_RATE__
So the whole thing might look like in your html:
<video controls width="300">
<source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>
and your js (make sure to include jquery)
var video = $('video')[0];
var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
var lastTime = Date.now();
var animationFrame;
var framesPerSecond = 25;
function loop() {
var time = Date.now();
var elapsed = (time - lastTime) / 1000;
// render
if(elapsed >= ((1000/framesPerSecond)/1000)) {
video.currentTime = video.currentTime + elapsed;
$(canvas).width(video.videoWidth);
$(canvas).height(video.videoHeight);
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
lastTime = time;
}
// if we are at the end of the video stop
var currentTime = (Math.round(parseFloat(video.currentTime)*10000)/10000);
var duration = (Math.round(parseFloat(video.duration)*10000)/10000);
if(currentTime >= duration) {
console.log('currentTime: ' + currentTime + ' duration: ' + video.duration);
return;
}
animationFrame = requestAnimationFrame(loop);
}
$('button').on('click', function() {
video.load();
loop();
});
http://codepen.io/newshorts/pen/yNxNKR
The real driver for Apple changing this will be the recent release of webGL for ios devices enabled by default. Basically there are going to be a whole bunch of people looking to use video textures. technically right now, that can't be done.
On IOS10 / Safari 10 you can now add the playsinline property to the HTML5 Video element, and it will just play inline.
If you create an audio element and a video element, you can play the audio via user interaction and then seek the video, rendering it to a canvas. This is something quick that I came up with (tested on iPhone iOS 9)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var audio = document.createElement('audio');
var video = document.createElement('video');
function onFrame(){
ctx.drawImage(video,0,0,426,240);
video.currentTime = audio.currentTime;
requestAnimationFrame(onFrame);
}
function playVideo(){
var i = 0;
function ready(){
i++;
if(i == 2){
audio.play();
onFrame();
}
}
video.addEventListener('canplaythrough',ready);
audio.addEventListener('canplaythrough',ready);
audio.src = video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4";
audio.load();
video.load();
}
CodePen
Test Page
Apologies for writing this as an answer instead of a comment on the main thread, but I apparently do not have enough reputation points to comment!
Anyways, I am also looking to do exactly the same thing as the OP.
I noticed that there is a particular library, krpano, coupled with the krpano videoplayer plugin that allows for video to be played on iPhone INLINE! Some demos of this in action can be found here: http://krpano.com/video/
While I would prefer a simple 2D video example over these crazy panorama videos, this is the closest I have found while scouring the web. From what I can tell, they use a normal element not attached to the document:
var v = document.querySelector('video');
// remove from document
v.parentNode.removeChild(v);
// touch anywhere to play
document.ontouchstart = function () {
v.play();
}
Video element before it's removed:
<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>
But that alone doesn't seem to be enough: when the video is played, it still goes fullscreen.
How do they manage to prevent the video from going fullscreen?
EDIT: After looking at both examples it looked like they both were leveraging the canvas element to render the video, so I went ahead and whipped up a demo showing off video rendering thru the canvas element. While the demo works great, it fails to deliver on iPhone (even tho the video element is completely removed from the DOM!) -- the video still jumps to full screen. I'm thinking the next step would be to apply these same principles to a WebGL canvas (that's what the krpano examples are doing), but in the meantime maybe this demo will spark some ideas in others...
http://jakesiemer.com/projects/video/index.htm
Is it possible to rule out a script load only when viewing site on Apple devices? For example I don't want this file to be loaded on iPhone/iPad:
<script type="text/javascript" src="js/jquery.skinned-select.js"></script>
Will be grateful for any help.
There may be an easier way, but try the following:
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) // check for touch screen
{ }
else {
// run code for mouse device
var s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "js/jquery.skinned-select.js");
var nodes = document.getElementsByTagName("*");
var node = nodes[nodes.length - 1].parentNode;
node.appendChild(s);
};
</script>
Hope it helps.
HTML5 mobile boilerplate recommends adding this snippet of Javascript to fix the "iPhone viewport scale bug":
// Fix for iPhone viewport scale bug
// http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
MBP.viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]');
MBP.ua = navigator.userAgent;
MBP.scaleFix = function () {
if (MBP.viewportmeta && /iPhone|iPad|iPod/.test(MBP.ua) && !/Opera Mini/.test(MBP.ua)) {
MBP.viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
document.addEventListener("gesturestart", MBP.gestureStart, false);
}
};
MBP.gestureStart = function () {
MBP.viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
};
What is the "iPhone viewport scale bug"? (The linked blog post doesn't make sense to me)
How does this code go about fixing the bug? (I.e., what exactly does it do?)
View this demo page with an iPhone. Rotate the phone from portrait to landscape. Notice the page being scaled up on landscape view.
See here to know in Detail http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug
check comments too.
This screenshot should help too:
(source: webdesignerwall.com)
So I've been using:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
to get my HTML content to display nicely on the iPhone. It works great until the user
rotates the device into landscape mode, where the display remains constrained to 320px.
Is there a simple way to specify a viewport that changes in response to the user changing the
device orientation? Or must I resort to Javascript to handle that?
Was just trying to work this out myself, and the solution I came up with was:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
This seems to lock the device into 1.0 scale regardless of it's orientation. As a side effect, it does however completely disable user scaling (pinch zooming, etc).
For anybody still interested:
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
From the page:
<meta name="viewport" content="user-scalable=no,width=device-width" />
This instructs Safari to prevent
the user from zooming into the page
with the "pinch" gesture and fixes the
width of the view port to the width of
the screen, which ever orientation the
iPhone is in.
You don't want to lose the user scaling option if you can help it. I like this JS solution from here.
<script type="text/javascript">
(function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>
You're setting it to not be able to scale (maximum-scale = initial-scale), so it can't scale up when you rotate to landscape mode. Set maximum-scale=1.6 and it will scale properly to fit landscape mode.
I have come up with a slighly different approach that should work on cross platforms
http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/
So far I have tested in on
Samsun galaxy 2
Samsung galaxy s
Samsung galaxy s2
Samsung galaxy Note (but had to change the css to 800px [see below]*)
Motorola
iPhone 4
#media screen and (max-width:800px) {
This is a massive lip forward with mobile development ...
I had this issue myself, and I wanted to both be able to set the width, and have it update on rotate and allow the user to scale and zoom the page (the current answer provides the first but prevents the later as a side-effect).. so I came up with a fix that keeps the view width correct for the orientation, but still allows for zooming, though it is not super straight forward.
First, add the following Javascript to the webpage you are displaying:
<script type='text/javascript'>
function setViewPortWidth(width) {
var metatags = document.getElementsByTagName('meta');
for(cnt = 0; cnt < metatags.length; cnt++) {
var element = metatags[cnt];
if(element.getAttribute('name') == 'viewport') {
element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
document.body.style['max-width'] = width+'px';
}
}
}
</script>
Then in your - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation method, add:
float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;
stringJS = [NSString stringWithFormat:#"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];
if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)
// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:#"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];
Additional Tweaking can be done by modifying more of the viewportal content settings:
http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
Also, I understand you can put a JS listener for onresize or something like to trigger the rescaling, but this worked for me as I'm doing it from Cocoa Touch UI frameworks.
Hope this helps someone :)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
suport all iphones, all ipads, all androids.
just want to share, i've played around with the viewport settings for my responsive design, if i set the Max scale to 0.8, the initial scale to 1 and scalable to no then i get the smallest view in portrait mode and the iPad view for landscape :D... this is properly an ugly hack but it seems to work, i don't know why so i won't be using it, but interesting results
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />
enjoy :)
Why not just reload the page when the user rotates the screen with javascript
function doOnOrientationChange()
{
location.reload();
}
window.addEventListener('orientationchange', doOnOrientationChange);