Is there a way to detect if the site is being viewed in mobile mode? That means the mobile version of the view itself. This should change after the user has called Request desktop version from the menu of his browser for example. That's the property I want to handle.
my website is just not layed out well yet for mobile and for now, I'd like to just tell that to the user. Something like 'Yeah, I know my site looks ugly on your phone, but you can do your job better, if you switch to desktop view
The usual way to do this is to use media queries to check the screen size; if it's below a certain value, make the "this layout sucks" button visible.
.switchToDesktopButton {display:none}
#media screen and (max-width: 480px) {
/* we're on mobile */
.switchToDesktopButton {display:block}
}
Related
I am creating a website where I have created a fullscreen button, which can be kind of useful on mobile - at least for my website. This is done through some Javascript. However, if I'm not mistaken, this fullscreen mode does not work in Safari (or maybe just iOS in general). So basically, I would like to remove the button in those cases, since it doesn't work for them.
Can this be accomplished with CSS, or do I need some Javascript as well ?
I think this is what you are looking for:
#supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
#supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
CSS media query to target only iOS devices
I have a web application that designed by ionic 2 to be used on browser
my web app works fine on mobile screen, but Is possible to make it such as this below picture ?
If possible, how can I do it ?
Yes you can do this by using css media query.
#media only screen and (min-width: 500px) {
body {
width: 500px;
}
}
hope it will work for you.
Or another perfect solution is for you.
Run this command
ionic serve --lab
After running command, on the right side of the browser, there is a buttuon "Platform", click on it and select your desired platform Android, iOS or Window or all of them.
This is a two part question. I have a website where there is a simple link with information for a user to view and at the moment I only have an iOS app version of my product. What I would like to do is if the user were to view the link on an iOS device I would like to restrict some of the information visible to the user, encouraging them to download the iOS app to see the info but if they are on an android device I would like to display all necessary content to the user since we do not yet have an Android app available. My two questions are:
1) Is it possible to detect if a user is on an iOS device to limit how much they can view on the web page?
2) Is it bad practice to show different content to users based on their device?
By the way, security is not an issue here. To be more specific I have an events app and I want to hide the address field on the web page for iOS devices so they will more likely download the app to view it but I do not want to completely exclude Android users. Is this even worth my time? Should I just forget about Android users all together for now?
It's not bad practice, everyone is displaying different content since you can't fit everything on phone devices. For example large tables.
You don't need javascript for this, you can do this with css only. Take a look at this example and try to implement it to your code.
HTML:
Link
Link
CSS
.desktop {
display: block;
}
.phone {
display: none;
}
#media screen and (max-width: 768px) {
.desktop {
display: none;
}
.phone {
display: block;
}
}
I'm using the so called media-queries which you can find more information about here
What this does is that the browser, both on initial render, resize, and rotate will display the rules within the media queries when the device windows width <= 768px. Those rules will override the previous.
I need to make a link open the native social media app if installed or redirect to the URL if not installed or if user is on a desktop.
I am using this bit of code in my link.
It works great except with desktops. The URL actually loads just fine, but, there is an error pop up stating that it can't open up the 'fb://'. Which makes sense, but like I said, this error pop up is not preventing the URL from loading, my facebook page shows up, just has the pop up window over the top and once I click 'do nothing' it goes away and all is good.
How can I make that error window not pop up on desktops?
I have tried a lot of different javascript functions to try and make the app open in mobile and URL in desktop. Many of them came from here. But none of them have worked for me. My code is the only thing that has come close to doing what I want.
I am looking for a proven code to accomplish this task or modification of my code above.
Make two links (mobile and desktop) then use a media query to hide one or the other depending on screen size. see example https://jsfiddle.net/kh0prtc4/9/
html
<a class="mobile" href="fb://MY FB PAGE" onclick="setTimeout(function(){ window.location='https://www.MY FB PAGE' }, 100)">mobile</a>
<a class="desktop" href="MY FB PAGE" onclick="setTimeout(function(){ window.location='https://www.MY FB PAGE' }, 100)">desktop</a>
css
.mobile {
display: none;
}
#media (max-width: 600px) {
.desktop {
display: none;
}
.mobile {
display: inline;
}
}
What I would like to build is a button that will allow the user to call in. On desktop this element will look like a big call-to-action,
then on mobile this will be both a call-to-action and an actual method to call.
The challenge that I need to address now is that the ability to call should be only present when on mobile. This is my current code:
<div id="headerCTA">
<div>
<a href="tel:888-336-1301">
<div>
Schedule a pickup<br>
888-336-1301
</div>
</a>
</div>
</div>
[Code gist on GitHub - for additional commenting]
But when on desktop (dictated by screen width?) this link should be deactivated. At the moment if someone happens to click on this from desktop, it attempts to open a page as "tel:888-336-1301"
Which produces the following error:
The address wasn't understood
Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program.
Another idea, that doesn't involve JavaScript, is to use CSS pointer-events property. Use media query to target devices that may not have the ability to make calls and for them, set pointer-events property to none. This way, clicking on the link won't have any effect.
Your code could look like this:
#media only screen
and (min-device-width : 768px){
#headerCTA a{
pointer-events: none;
}
}
See pointer-events property documentation for details.
Use a mobile detection script, like the one in the accepted answer here: Detecting a mobile browser
Then
var mobile = mobilecheck();
if (!mobile) {
document.getElementById('telephone-link').href = '#';
}