Mobile platform development need to record (Continued)

    This week the teacher to let me familiar with the development of mobile terminal platform, operation requirements adaptation Android so the machine and iphone4,4s, 5. I don't know the mobile end of the tip, so my first step is to look up information.

  1, The mobile terminal data

  The recent mobile phone webpage project some chop suey share (    here let me to show the pictures with the experience of a deeper).

  Device pixel ratio devicePixelRatio introduces   (here let me on the device pixels than to have a preliminary understanding).

  A     (Smashing Magazine.).


    2, Start

  In 480 as the basis for writing HTML and CSS benchmark, font size is 20px. Except for border, all numerical unit using EM, divided by the base font value according to the design draft amount to. Ready times larger than 1.5 dips equipment background picture.

  When processing the dips more than 1.5 photos of equipment, the code as follows:

   @media only screen and (min-device-width:541px) and (max-device-width:800px),only screen and (min-width:541px) and (max-width:800px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio :1.5){

  //For the actual resolution in the 541px to the 800px device or dips is greater than 1.5 of the equipment to write CSS

}

  Other screen size settings corresponding font size: 

  /* for 1080 px width screen */

  @media only screen and (min-width:801px) and (max-width:1080px){

    body{font-size:45px}

  }

  /* for 800 px width screen */

  @media only screen and (min-width:720px) and (max-width:800px){

    body{font-size:33px}

  }

  /* for 720 px width screen */

  @media only screen and (min-width:641px) and (max-width:720px){

    body{font-size:30px}

  }

  /* for 640 px width screen */

  @media only screen and (max-device-width:640px),only screen and (max-width:640px){

    body{font-size:27px}

  }

  /* for 540 px width screen */

  @media only screen and (max-device-width:540px),only screen and (max-width:540px){

    body{font-size:22.5px}

  }

  /* for 480 px width screen */

  @media only screen and (max-device-width:480px),only screen and (max-width:480px){

    body{font-size:20px}

  }

  /* for 320 px width screen */

  @media only screen and (max-device-width:320px),only screen and (max-width:320px){

    body{font-size:13.5px}

  }


  3, Test

  Share some can test site (but any test site than the prototype test, have a look good).

  

  

  Note that some may attribute of CSS mobile phone browser does not support, sometimes we need to use the iscroll.js to simulate the said the last time.

Posted by Samuel at November 13, 2013 - 4:07 AM