0

So here's the deal; I've got a website fully coded in desktop and phone versions, but I don't know how to make the website know that the device visiting the site is either a desktop computer or a mobile device, so it loads either version of the site accordingly. How can I do that? I'm still pretty much a novice in web development so I don't know.

Thanks in advance.

closed as off-topic by Excellll, karel, Ramhound, ChrisInEdmonton, a CVn Nov 25 '15 at 15:57

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question is not about computer hardware or software, within the scope defined in the help center." – Excellll, Ramhound, ChrisInEdmonton
If this question can be reworded to fit the rules in the help center, please edit the question.

  • How have you built the phone version? Bootstrap? Generally you go off screen size to make the guess at the site to display. – Burgi Nov 25 '15 at 15:39
  • Yes it's using bootstrap – Webodan Nov 25 '15 at 15:40
  • 1
    The easy way to test the site is to grab the edge of your browser and shrink it – Burgi Nov 25 '15 at 15:41
  • Programming questions should be asked on Stack Overflow. – a CVn Nov 25 '15 at 16:04
1

You state you are using Bootstrap to build your website, because of this you shouldn't have two versions. You build a single version then specify the elements to show at various screen sizes with CSS classes.

The Bootstrap documentation on how to use the grid system is helpful in this case.

To test the site you can either shrink the size of your browser and the elements will reorder, resize or disappear depending on the breakpoints you have set or you can use a service like BrowserStack which emulates various browsers.

1

This solution doesn't require javascript and work very well through desktop, tablet and smartphones. You will have one single file for every page making easy to do changes, upgrades, etc.

First of all you will need this on the head section on every html file:

<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

Then, in the CSS file you can make a responsive design able to adapt to different screen sizes. For example on your css file you define:

body {
    font-family: 'Arial', sans-serif;
    font-size:1em;
    color: #636770;
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("/images/bg.png");
    background-repeat: repeat;
}

#top {
    display:block;
    width:100%;
    margin-top:40px;
    height: 147px;
    position: static;
}

@media (max-width:800px){


    #top {
        display:block;
        width:100%;
        margin-top:5px;
        position: static;
    }
}

In this example we have defined body as a general element with the same properties for every screen size, but #top is defined in a way that on desktop will have a top margin of 40 px, and when the screen width is below 800px the top margin is 5px.

Not the answer you're looking for? Browse other questions tagged or ask your own question.