Misc

Question 1

Set a view port, what are the options?

Answer 1

‹meta name=”viewport” content=”width=device-width, initial-scale=1.0”/›

initial-scale=1.0 fits the viewport to the dimensions of the device (device-width and device-height values), which is a good idea because the size of the viewport fits the dimensions of the device regardless of its orientation.

width=device-width size the viewport to always corresponds to the (fixed value) width of the device, and thus is distorted in landscape orientation because que right value should be “device-height” not “device-width” in landscape (and it’s worse on iPhone5 whose device-height value is 568px, compared to its 320px device-width).

Therefore, I would rather recommend to use initial-scale alone, not associated width=device-width. Because the combination of the two is problematic, and moreover I think than even only width=device-width is problematic.

Question 2

make the p so it shows one line and 3 dots
p{
        display: block;
        width: 100px;
  }

Answer 2

p{
       display: block;
        width: 100px;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
 }