手機版頁面

2013-09-09

Mobile device reference for web screen design

手機內部觸控滾動視窗
 
.scrollable {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Control page scale by meta viewport

<meta name="viewport"  content="width=device-width, initial-scale=1, user-scalable=no

,  maximum-scale=1, maximum-scale=1"/>

Description

attribute

value

width device-width, pixel(only number, dont need to add PX ex. 320)
height device-height, pixel(only number, dont need to add PX ex. 320)
initial-scale 1 = 100% ex. 0.5 (50%), 1.5 (150%)
maximum-scale 1 = 100% ex. 0.5 (50%), 1.5 (150%)
minimum-scale 1 = 100% ex. 0.5 (50%), 1.5 (150%)
user-scalable no (scale not allowed) / yes (allow scale)



ps: you do not need to contain all of those attributes in your setting, if you only need your page to scale automatically by device width, and you only need to set your width to device-width. Please refer to the example below for some common used!
 

  • initial scale by device width and no scale allowed:

<meta name="viewport"  content="width=device-width,  user-scalable=no" />

 

  • initial scale 100% by 320px width, and scale allowed maximum 110% and minimum 90%:

<meta name="viewport"  content="width=320, initial-scale=1, user-scalable=yes

,  maximum-scale=1.1, maximum-scale=0.9"/>




windows phone solution
<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->

example style sheet structure:
<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />

<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />



 



References:

hacks.mozilla.org (2010) http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/

Apple Inc. (2010) http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

 

Microsoft (2011)

http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/03/22/targeting-mobile-optimized-css-at-windows-phone-7.aspx

Carrer web log (2010)

http://www.vcarrer.com/2010/07/bulletproof-css3-media-queries.html

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【333575】
digishot webdesign studio