SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,004
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post How can i make my site not be destroy in mobile phone

    Hi, I just want to ask if how can i make my website not to be destroy in viewing in the mobile phone...I mean i want that it will adopt the screen of the mobile phone or by viewing in the ipad etc....I want my website will resize depends on the gadgets or the mobile phone.


    Thank you in advance

  2. #2
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Responsive design, that is the word your looking for. It is becoming very popular now, and it looks like that very very soon without responsive design you wont be able to do anything, as more than half of internet traffic is comming now from other devices but PC.
    There is many different articles about responsive design, as well I have seen few good ones on sitepoint. Plus on google you will find many tutorials on this theme.

    Main idea of Responsive design is that all properties is set to fluid width, such as em's or percentages. So depending on screen size, your website will resize, will adapt.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Yes, firstly, avoid setting fixed widths on elements, and as you build the site, look at what happens to elements as you narrow and widen the browser window. Flexible widths (em or %) in combination with @media rules and the viewport meta element are the way to go. E.g. When using @media rules, you can place this in the head of your document for better results:

    Code:
    <meta name="viewport" content="width=device-width">

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,004
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph what is value of
    content="width=device-width"

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    It's a bit complicated, but by default, a device like the iPhone treats your layout as something like 980px wide when you are using @media rules (thus hiding a lot of it off screen), unless you tell the browser to fit everything on the actual screen. Here's a much more detailed explanation of it:

    http://www.quirksmode.org/blog/archi...ning_meta.html

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,004
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph,Thank you for this link...I will read this

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,004
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi raplh, Is the annotation is necessary ?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Not sure what you mean.

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,004
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I mean this "@"

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You need the @ in your style sheet, as in

    Code:
    @media only screen and (min-width : 320px) and (max-width : 480px) {
    	your small screen styles here
    }

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,004
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •