Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    May 2014
    Posts
    7
    Member #
    39232

    Mobile detection, orientation and viewport

    I have designed a website, but I do not want to design a separate mobile site.
    I want to enable the visitor on a mobile or any other device when they visit the site on any other device that
    it automatically orientate either to landscape which ever way they want it to appear
    It auto detect a mobile device and auto fit on that specific device - (mobile browser)
    Add a viewport...
    I have this code but either I am doing something wrong or it isn't working - I added it to the head section of my website

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=320"/>
    </head>
    <head>
    <meta name='viewport' content='width=device-width' /> <style type='text/css'> @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } </style> </head>
    <head>
    <style>
    @media all and (orientation: portrait) {
    body { }
    div { }
    }
    </style>
    </head>

    Please help!
    I am aware of the responsive design, but how to do it to my web design programme... I do not know were to put the codes!
    Just to say on coding I am at a loss!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    When you say, "put the codes", what exactly do you mean? Are we copy/pasting something, or are you just not sure where media queries belong in the CSS?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You've got three head tags going on there. You only need one. Start with that and the rest may come to you from that alone.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member
    Join Date
    May 2014
    Posts
    7
    Member #
    39232
    I would say both to your question. I add the codes to a placeholder, but also I am not sure where the media queries should go as you say

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    First, 99.9% of CSS should be in an external, linked CSS file. You link it with the link tag:
    HTML Code:
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    Second, there are a couple different ideas about where media queries go. Some like to mix them in with the rest of their CSS, putting an individual query just after a particular declaration. I, on the other hand, like to put the media queries at the very end of my CSS file almost as if it were a stylesheet of its own. Either way is fine, just remember that the media query should come after the initial style unless you want it to take precedence over the initial style, and the selectors need the same or higher specificity as the initial styles.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Junior Member
    Join Date
    May 2014
    Posts
    7
    Member #
    39232

    mobile detection

    Quote Originally Posted by TheGAME1264 View Post
    You've got three head tags going on there. You only need one. Start with that and the rest may come to you from that alone.
    Should it be like this?

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=320"/>
    <meta name='viewport' content='width=device-width' /> <style type='text/css'> @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; }
    @media all and (orientation: portrait) {
    body { }
    div { }
    }
    </style>
    </head>

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yes, it should. There should only be one set of head tags per document.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com