treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Make my website mobile friendly

  • Hi i am trying to make my website mobile friendly. what changes i have to make with head tag ?

    can anyone suggest the right way. Remember i don't have to write @media css only want to resize the page according to screen size.

    i have tried this but not working

    meta name="viewport" content="width=device-width"

  • Hi @matthewb

    can anyone suggest the right way. Remember i don't have to write @media css only want to resize the page according to screen size.

    I can't really make sense of this, are you saying you don't want to use @media?

    If that's the case, you could just use percentages instead of fixed-pixels so it adapts to the size of the browser window.

    Something like this - http://codepen.io/Watson90/full/KupHs

    Using @media will give you so much better control at certain points though!

  • ya don't want to use @media css

    just have a look at "http://themeforest.net" in ur mobile it will resize according to mobile device.

  • It's not resizing at all on my Google Nexus.

    I think you're getting confused with Theme Forest 'resizing' and Theme Forest just fitting on the screen because it's contained within a wrapping div of some sort.

    Upon inspection of Theme Forest's web page using Firefox and/or Chrome, you'll they have a div with a class of container and it's set at 984px, as opposed to the header, navigation bar, footer and sub-footer that is set to be as wide as the browser window itself (100%).

  • @matthewb - I'm really not seeing why you don't want to use @media queries. It's the mainstay of responsive web design and one of the best methods for supporting mobile devices.

    Why are you against using @media?

  • @andy_unleash @media is a amazing thing but the requirement is to just scale website according to device just that so i think only to do something with meta tags but unfortunately it is not working.

  • The meta tag line (like the one you posted above) won't change anything in terms of your physical design, that will have to be done using @media. But what it will do is force the browser on the mobile device to zoom in accordingly.

  • The meta viewport is not for styling, it's a signal to the browser/device what the scales should be and assists with media queries by helping determine the width of the device/browser in pixels is.

    If you want your website to respond to widths and changes then you will need media queries. Sure you dont absolutely need them and could have just everything percentage based. But if you get to small sizes and want to move your sidebar below the content (for example), you'd need a media query to achieve it.

    Edit: Check out MDN for details on the viewport tag - https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

  • If you dont like @media which has no sense, may be you can try with some javascript library. jQuery Masonry is something that you may use, but I am not so sure if that is what you are looking for. To build your site on entirely liquid base is not very good decision.

  • I believe matthewb is looking for this:

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    
  • Actually Drew., he isn't. :-)

  • Well if he's looking for a magic block of code that is going to make his site responsive, he's SOL.

  • Yeah that's what we're trying to get across

  • @DrewKerriganNY ya your code works LOL

  • @DrewKerriganNY ya your code works LOL

    Hah I'm glad that it worked for your @matthewb.