I am using the following javascript to detect whether the site is viewed on a mobile device it works perfectly as a redirect (see example 1);
However, is it possible to amend it to so it amends the font size of an element or class (the original font-size is contained within an external style sheet) when the same condition is satisfied, that being a iDevice is detected.
//original code: (Javascript)
// iDevice
var iDevice = {
// Android
Android: function() {
return navigator.userAgent.match(/Android/i);
},
// Blackberry
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
// Apple
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
// Opera Browser
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
// Windows Mobile
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
// Function: (iDevice)
any: function(){
return (iDevice.Android() || iDevice.BlackBerry() || iDevice.iOS() || iDevice.Opera() || iDevice.Windows());
}
};
<!-- Working HTML -->
{
if( iDevice.any() )
window.location = "http://www.stackoverflow.com";
}
One possible solution would be to modify the JavaScript so that it adds one or more custom classes to the 'body' element in your HTML based on the device agent. Then, in your CSS, you could do something like this:
.header {
/* default font size */
}
.android .header,
.iphone .header
.mobile .header {
/* custom font size */
}
However, a better solution might be to forgo user agent detection and instead use media queries to make your website responsive based on the actual width of the device the user is using to view your website.
Your code will not work on any device that you haven't explicitly enumerated. For example, why don't you support Firefox OS?
Of course you can try to enumerate every single mobile device ever produced (and keep doing that to keep your code working for new devices) and change the font size for the detected mobile devices (that you know about) but it would be much better to use responsive web design for things like that.
You can use a framework like:
Bootstrap
Foundation
or many others, or to use CSS media queries yourself if you don't want to use those frameworks.
See: Media Queries for Standard Devices on CSS-Tricks.
Related
I have a responsive HTML page for desktop and mobile version. And I have two functions, one is for the desktop version and one is for the mobile version. Both functions are on the same onclick event attribute in a div. I want one function to be executed at a time according to the width of the device i.e., if the width of the screen is greater than 425px then the function for the desktop should be executed and if it is 425px or less then the function foe the mobile version should be executed. Found different answers on StackOverflow like window.matchMedia() etc But it is not working for me.
Try window.innerWidth <= 425 for detecting mobile.
Some fun things you can do with this and global getters:
Object.defineProperty(window, 'mobile', {
get() {
return window.innerWidth <= 425;
}
})
function SomeFunction() {
if (mobile) {
alert('im on mobile!')
} else {
alert('on a tablet, laptop, or desktop!')
}
}
I figured out how to make a video full screen on click for desktop devices, however, the same code doesn't work on mobile devices. How can I make it work for mobile screens as well? This is my js code:
<script>
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}, false);
</script>
The fullscreen API is not supported for all mobile devices. https://caniuse.com/#feat=fullscreen
You can use Screenfull to avoid all the checks and complexities to handle the fullscreen experience. It exposes a property isEnabled which tells you if you are allowed to enter fullscreen. You can request fullscreen based on its value.
Maybe you got a 'playsinline' in your Videotag?
Just remove it
myVideo.removeAttribute('playsinline');
My website - https://wilfredopersonal.herokuapp.com/# - shows some specific content for mobile view. The problem is that this content is also shown in Desktop while the Desktop content is loading. How can I prevent it from doing so?
<script>
function isMobile() {
if (navigator.userAgent.match(/Mobi/)) {
return true;
}
if ("screen" in window && window.screen.width < 1366) {
return true;
}
var connection =
navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
if (connection && connection.type === "cellular") {
return true;
}
return false;
}
</script>
<script>
if (!isMobile()) {
document.getElementById("not-desktop").style.display = "none";
document.getElementById("container").style.display = "unset";
} else {
document.getElementById("not-desktop").style.display = "unset";
document.getElementById("container").style.display = "none";
}
</script>
Because your script is executed after HTML loaded. So before the browser read to your script, the mobile keep visible.
I recommend you to use CSS media query to solve this rather then using script. Here is a good answer demonstrate how to use media query to target desktop and mobile. This answer could solve your problem.
Another way is set #not-desktop's display to none in your CSS. Then when the script executed, if it is shows on mobile, your code will show it. But this method is not flexible.
This is an issue where you are displaying both your mobile view and your desktop view at the same time, then disabling which ever "view" is incorrect. Since your javascript is loaded after the page is created, it will display both views until the javascript loads and disables one.
You can fix this by making both of them "disabled" from the start - add the style attribute like this: style="display:none" to "not-desktop" and "container". That way both of them will be disabled until the javascript can enable one.
EDIT: after looking at Li Jinyao's answer, I see that there is a much faster way to do this - use a CSS media tag to check the width of the element, and only display it if it matches the requirements. Afterwards, use java script to check the userAgent and anything else, and change the displayed element accordingly.
To see information about CSS media tags, look at Li Jinyao's answer.
I am using a very simple HTML site and need to re-direct to a separate URL for Tablet and Mobile. I have the Mobile working with the following. Is there something I can add that is not too complex so it works for tablets as well?
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "https://www.londonontariomortgages.ca/m/index.html";
}
//-->
</script>
Nowdays you dont check for specific devices. Why? Because ther are too many to keep track of.
Thats why you check for features to act accordingly.
modernizr
You can make your Website responsive aswell. Take a look at Bootstrap.
By using this you configure your site to behave like "put that down there if the screen is medium sized" (they have standard breakpoints to determine if a screen is small medium large etc., which are widely used)
EDIT
To actually detect devices-types: mobile-detect
you can try to use navigator.userAgent and Regex to check user device
function Init(){
if( /Android|iPhone|iPad/i.test(navigator.userAgent) ) {
//mobile device
document.location = "https://www.londonontariomortgages.ca/m/index.html";
}else {
document.location = "https://stackoverflow.com/questions/50994561/very-simple-redirect-for-tablet/50994679?noredirect=1#";
}
}
Init();
you may want to use mobiledetect package.
composer require mobiledetect/mobiledetectlib
$detect = new Mobile_Detect;
// any mobile devices
if ( $detect->isMobile() ) {
// do something for mobile users
}
// Any tablet device.
if( $detect->isTablet() ){
// do something for tablet users
}
I have many 300x200px divs(.contentUser) rendering representing users.
contentUser:hover(over)
->shows another div(.contetnButtonWrap) sliding in with buttons.
contentUser:hover(out)
-> contentButtonWrap slides out again
This works fine with CSS on any device I have tested so far except iPad(no hover). I tried with :active but it didn't work
So on iPad instead of hover(over) I use onclick:
function alternativeHover() {
var userDivs = document.getElementsByClassName('contentUser');
[].forEach.call(userDivs, function(e){
e.onclick = function() {
var target = e.getElementsByClassName('contentButtonWrap');
e.style.backgroundSize='450px 300px';
e.style.outline='3px solid green';
target[0].style.left=0;
};
});
};
I have 3 questions:
Is this really the best that can be done in this case?
How to handle the hover(out), its a div so it doesn't grab focus so I can not use onblur! And I would not like to have to check pixels on mousemove or anything like that.
Why doesn't hover work on iPad if it works on Android smartphones and iPhones?