allow only desktop versions of a website

Question

1.00/5 (1 vote)

See more:

Hi, i am currently working on a website where the problem is it's a bit bandwidth-consuming, so it doesn't open properly on mobiles. So, as of the moment, i don't want my website to be viewable to anyone on mobile platforms. Maybe if someone tries to open, i can show him a message like "Work in progress. Please come back soon!".

In short, i just want my website to be seen only on desktop and laptops! Please suggest how to block it on mobile platforms or instead display a "coming soon" page.

Any help will be highly appreciated.

Posted 1-Dec-15 8:09am

Member 11176062

Updated 1-Dec-15 8:36am

Tomas Takac

v2

Add a Solution

Comments

Richard Deeming 1-Dec-15 14:21pm

What server and technology stack are you using?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-12-01T09:03:00

First and foremost, avoid it by all means. Try to show on the small screen at least something. Try to embrace the ideas of elegant degradation and graceful degradation: https://en.wikipedia.org/wiki/Elegant_degradation[^].

But I do understand that sometimes you cannot do a lot of too good job at once. In this case, let's properly formulate the problem. At this moment, you are not doing it right. What is the reason of not showing the full page on a mobile platform? Not enough bandwidth? Hardly. Just think about it: if this problem really exists, it can appear on the desktop as well; some desktops can use slower internet connection, they can even get it via the ad-hoc network served by a mobile device. That would be a great miss with your idea of detecting the mobile device. The whole idea is wrong.

What else? Most apparent thing is the pixel size of the screen, and, at the same time, this is the most apparent obstacle for showing more content. More exactly, only the pixel size of the windows area is important. Is the user resize it to a too small size, what's the difference if the device is desktop or not? And this is easy to detect. Use the properties window.innerHeight and window.innerWidth:

JavaScript

if (thereIsEnoughRoom(window.innerWidth, window.innerHeight);
   showItAll();
else
   showSorryComingSoon();

Isn't it logical?

—SA

Suvendu Shekhar Giri · Answer 2 · 2015-12-01T08:36:00

You can check device using Javascript and can accordingly display message.

JavaScript

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;

then you can show a message and redirect to some other page may be.
Something like-

JavaScript

if(ismobile==false)
{
   alert("comming soon");
   window.location="http://www.mywebsite.com";
}

Reference: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery[^]

Hope, it helps :)

allow only desktop versions of a website

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0