今天做的事

昨天作出九宫格模型

然后看到任务要求还有在移动端展示

我开始只是把网址发到我的手机上尝试登陆

结果发现运行不了

我的九宫格只是我自己做的一个离线界面

没有上传

其他人无法访问

我查询了如何通过移动端访问

通过viewport优化适配移动端

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 

device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

但是没有怎么看的明白

大概看了一下代码

(function(){

function ajustViewport(gameWidth,gameHeight,isLandscope){

var viewportNode,

   viewportContent = "",

   ua = window.navigator.userAgent.toLowerCase(),

   _width = isLandscope ? Math.max(window.innerHeight,window.innerWidth) : Math.min(window.innerHeight,window.innerWidth),

   _height = isLandscope ? Math.min(window.innerHeight,window.innerWidth) : Math.max(window.innerHeight,window.innerWidth),

   rate = _width / gameWidth,

   rate2 = _height / gameHeight,

   scalable = ",user-scalable=no",

   width;

if (rate > rate2) {

width = Math.round(_width/rate2);

} else {

width = gameWidth;

}

if (ua.indexOf("android") >= 0) {

viewportContent = "width=" + width + scalable + ",target-densitydpi=320";

}else if(ua.indexOf("ios") >= 0 || ua.indexOf("iphone") >= 0 || ua.indexOf("ipod") >= 0 || ua.indexOf("ipad") >= 0){

viewportContent = "width=" + width + scalable;

}

viewportNode = document.querySelector('meta[name=viewport]');

if(viewportNode){

viewportNode.content = viewportContent;

}else{

viewportNode = document.createElement("meta");

viewportNode.name = "viewport";

viewportNode.content = viewportContent;

document.head.appendChild(viewportNode);

}

}

window.ajustViewport = ajustViewport;

写进自己的webstrom尝试增增改改自己理解

今天的收获

如上

问题

无

明天计划

请假