源于生活

标题: wap网站屏幕自适应的问题 [打印本页]
作者: kevin-ying    时间: 2014-10-15 01:42
标题: wap网站屏幕自适应的问题
前一段时间一直被wap网站的自适应困惑……
仔细研究了一下新浪的wap网站，发现原来我们的head存在着这样的差异……
  1. <%@page contentType="text/html;charset=UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Cache-Control" content="no-cache"/>
  7. <meta name="viewport" content="width=device-width; initial-scale=1.4;  minimum-scale=1.0; maximum-scale=2.0"/>
  8. <meta name="MobileOptimized" content="240"/>
  9. </head>
复制代码



在手机网站的head里加入以下标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复制代码



其中：
      width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例
      minimum-scale - 允许用户缩放到的最小比例 //嘎嘎，终于知道我们的网站为什么不能缩小了，哈哈，原来我们缩放的最少比家里就是我们的默认比例啊……wap网站屏幕自适应的问题
      maximum-scale - 允许用户缩放到的最大比例
      user-scalable - 用户是否可以手动缩放
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
复制代码



在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例


如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
[html] view plaincopy
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
复制代码



这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。

作者: kevin-ying    时间: 2014-10-15 01:50
  1.     <meta name="description" content="">
  2.     <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no"  />
  3.     <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />
  4.     <meta name="apple-mobile-web-app-capable" content="yes" />
  5.     <meta name='apple-touch-fullscreen' content='yes'>
  6.     <meta name="full-screen" content="yes">
  7.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  8.     <meta name="format-detection" content="telephone=no"/>
  9.     <meta name="format-detection" content="address=no"/>
复制代码


作者: kevin-ying    时间: 2014-10-15 02:02
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
复制代码




欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1