Guest User

Untitled

a guest
May 23rd, 2018
112
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.82 KB | None | 0 0
  1. 移动设备
  2.  
  3. viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
  4. 大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  6. <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
  7. width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  8. height:高度(数值 / device-height)(范围从223 到10,000)
  9. initial-scale:初始的缩放比例 (范围从>0 到10)
  10. minimum-scale:允许用户缩放到的最小比例
  11. maximum-scale:允许用户缩放到的最大比例
  12. user-scalable:用户是否可以手动缩 (no,yes)
  13. minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)
  14. 注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
  15.  
  16. WebApp全屏模式:伪装app,离线应用。
  17. <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
  18. 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
  19. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  20. 添加到主屏后的标题
  21. <meta name="apple-mobile-web-app-title" content="标题">
  22. 忽略数字自动识别为电话号码
  23. <meta content="telephone=no" name="format-detection" />
  24. 忽略识别邮箱
  25. <meta content="email=no" name="format-detection" />
  26. 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner(如下图)。参考文档
  27. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  28. 其他 参考文档
  29. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
  30. <meta name="HandheldFriendly" content="true">
  31. <!-- 微软的老式浏览器 -->
  32. <meta name="MobileOptimized" content="320">
  33. <!-- uc强制竖屏 -->
  34. <meta name="screen-orientation" content="portrait">
  35. <!-- QQ强制竖屏 -->
  36. <meta name="x5-orientation" content="portrait">
  37. <!-- UC强制全屏 -->
  38. <meta name="full-screen" content="yes">
  39. <!-- QQ强制全屏 -->
  40. <meta name="x5-fullscreen" content="true">
  41. <!-- UC应用模式 -->
  42. <meta name="browsermode" content="application">
  43. <!-- QQ应用模式 -->
  44. <meta name="x5-page-mode" content="app">
  45. <!-- windows phone 点击无高光 -->
  46. <meta name="msapplication-tap-highlight" content="no">
Add Comment
Please, Sign In to add comment