I create a web page(chrome & safari) for mobiles (iphone & android), I want to lock the screen orientation in portrait mode.
Unlike mobile apps,there is no manifest file and activity as it a web page.
How to lock the orientation in mobiles using technologies (css/javascript/bootstrap/jquery) or any other?
I use a manifest file for my web app, which locks orientation for Chrome on my Android. For whatever reason, Safari gives their users the "right" to do this, but not the designers of the web app... Sort of feels like copyright infringement or something! ;) Don't get me started on Safari's disgraceful rewriting/rendering of input buttons!...
Anyways, back to the answer.
1) Include a link to your manifest within the head section of your page:
<link rel="manifest" href="http://yoursite.com/manifest.json">
2) Create your manifest file, "manifest.json"
{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}
3) Read more about manifests HERE
From my tests, assigning the screen.lockOrientation ( every browser versions ) to a var throw an illegal invocation error. Just use wind.screen.orientation.lock('landscape'); . It
EDIT: You can't use lock orientation on safari, cause it doesn't support fullscreen api at the moment http://caniuse.com/#feat=fullscreen . The lock orientation API NEED a fullscreen page to work. In Chrome, the window.screen.orientation.lock return a promise. So, AFTER you go fullscreen with the page, you can do something like this :
var lockFunction = window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
console.log('Orientation locked')
} else {
console.error('There was a problem in locking the orientation')
}
However, the lock orientation and fullscreen API are still experimental, not all browsers supports it.
The lockOrientation method locks the screen into the specified orientation.
lockedAllowed = window.screen.lockOrientation(orientation);
From the following code, you can check that orientation is locked or not.
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (lockOrientation("landscape-primary")) {
// orientation was locked
} else {
// orientation lock failed
}
see the following link, you will get idea from this.
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
You can use:
screen.addEventListener("orientationchange", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
and
screen.lockOrientation('landscape');
Following: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
Related
I'm using Titanium, my app supports tablets and phones. For phones I need to use PORTRAIT orientation anche for tablets LANDSCAPE.
I tried to configure android:screenOrientation="nosensor" in tiapp.xml importing all activities from AndroidManifest.xml and orientationModes : [Ti.UI.LANDSCAPE_LEFT] in window configuration in tablet case, but I have no results. All orientations are active.
Anyone can help me?
This should be pretty forward with following points:
Since you need to change orientations at runtime, you cannot control it from tiapp.xml unless you create separate builds for phones and tablets which I believe is not the case.
Leave tiapp.xml as default and do not set any orientation there.
Use below snippet for handling it inside app.tss file.
"Window[if=Alloy.isTablet]" : {
orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
}
"Window[if=Alloy.isHandheld]" : {
orientationModes: [Ti.UI.UPSIDE_PORTRAIT, Ti.UI.PORTRAIT]
}
This solution will work only if you create Window controllers using XML, not by using Classic JS.
Double check your code to not to set orientations anywhere else to avoid any issues.
I'm looking for some code to place on my website, which detects if the user is on a mobile device, opens a pop-up and offers to add an icon on the home screen linking to the website. (Just like adding the website to your favorites and placing an icon on the home screen). Ideally it should work on Android & iPhone. Any help would be much appreciated.
What you can do is create a div somewhere on your page, with the exact text you want. In your CSS, you then make the div display:none and add a media query so when the device is a mobile phone you display the div again.
.mobile-div {
display: none;
}
#media (max-width:767px) {
.mobile-div {
display: block;
}
}
Ofcourse you can expand on this by having a javascript function checking for the screen width, and use functions to open a popup when a certain width is reached (and is thus considered a mobile phone).
<script type="text/javascript">
(function () {
var width = $(window).width();
if (width < 400) {
// do something
}
})();
</script>
You can then search Google for a way of actually making the icon, for example this script might help you: https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble. Although I think it is not possible in iOS to do this, you might have to consider creating an app that basically launches your website, or something similar. Ofcourse this will mean you have to pay for your app being displayed in the store, so it comes down to you: Do you really need this functionality, or not?
I'm creating a multidevice multiplatform app with Phonegap.
Basically, I have two scenarios:
Smartphones should be locked to portrait mode.
Tablets should be locked to landscape mode.
I should be able to customize the layout and placement with media queries, depending if the device is a tablet or smartphone (landscape or portrait, respectively).
I've experimented with locking to portrait regardless of device, and then using CSS media queries and rotate transformations, but I run with two problems:
I haven't been able to find a media query that targets tablets and excludes smartphones and viceversa, the universe of resolutions seems to be too sparse.
Working with body{transform:rotate(90deg)} looks like a nightmare to nail everything down.
I also looked into: https://github.com/champierre/pg-plugin-screen-orientation but it seems to be working only for Android and I need to support both iOS and Android.
Does anyone have any experience with this particular scenario? Any suggestions on handling this orientation problem?
you can use navigator.userAgent to get the device type. For Example something like this:
var deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
alert(navigator.userAgent);
Or you can use the guide in this page...
After that you can use the following code to set the orientation:
$(window).bind('orientationchange', function(event){
if (/*is tablet*/) {
navigator.screenOrientation.set('landscape');
}
else if (/* is smart phone */) {
navigator.screenOrientation.set('portrait');
}
});
I hope that above codes be helpful for you ;)
I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.
I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.
Have you checked out mediaelement.js?
Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...
Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.
I am currently working on a mobile website using jquery mobile and I encountered problem in detecting orientation change. My mobile website detects the orientation as "landscape" when in portrait mode and vice versa when testing on my Samsung Galaxy. However, working properly on iphone n HTC Desire. I did find in some forums that described that as Android bug and someone used setTimeOut to tackle it. But I can't solve the problem using that. Not sure if it's my syntax error or not. Can someone kindly enlighten me? Thanks in advance.
Sample code will be much appreciated.
Here is my current code:
$(document).ready(function() {
$(window).bind("orientationchange", function (event) {
setTimeout(detectOri(event),100);
});
function detectOri(event)
{
alert(event.orientation);
if(event.orientation == 'portrait')
{
//load portrait mode page
}
else if(event.orientation == 'landscape')
{
//load landscape mode page
}
}
});
you shouldn't be using DOM ready
use pageinit
change setTimeout(detectOri(event),100); for this:
setTimeout(detectOri,1000);