多屏幕尺寸测试

Chrome有一个非常诱人的功能就是能够模拟不同设备的尺寸，在Chrome的Inspector中点击toggle device mode按钮，然后就可以在不同的设备屏幕尺寸下进行调试：

无线模拟

无线模拟方案主要有三点

http协议修改- userAgent
视图渲染-无线模拟
事件模拟- touch

HTTP协议修改

js本身无法修改http协议，我们需要借助于chrome extension，开发一个chrome扩展插件用于修改http协议，通过插件我们可以通过浏览器获取设备、通信的底层信息。开发插件是一件很简单的事件，这里涉及的重点在于修改httt.userAgent

/**
 * 更新ua
 */
function replaceHeader(requestHeaders) {
  var newHeaders = [];
  for (var i = 0; i < requestHeaders.length; i++)
    if (requestHeaders[i].name != "User-Agent")
      newHeaders.push(requestHeaders[i]);
    else {
      var new_value = requestHeaders[i].value;
      //这里将user-agent声明为iphone
      newHeaders.push({
        name: "User-Agent",
        value:
          "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25"
      });
    }
  return newHeaders;
}

/**
 * 监听通信
 */
function updateListeners() {
  let listener = function(details) {
    var header_map = {
      requestHeaders: details.requestHeaders
    };
    if (!uaIsPhone) {
      return header_map;
    }
    if (
      details &&
      details.url &&
      details.requestHeaders &&
      details.requestHeaders.length > 0
    )
      header_map = {
        requestHeaders: replaceHeader(details.requestHeaders)
      };
    return header_map;
  };
  chrome.webRequest.onBeforeSendHeaders.addListener(
    listener,
    {
      urls: ["http://*/*", "https://*/*"]
    },
    ["requestHeaders", "blocking"]
  );
}

监听chrome.webRequest.onBeforeSendHeaders，在发送前修改ua为无线。

服务端收到的ua为无线的http请求，判断为无线终端返回无线页面。

此时浏览器的navigator.userAgent还显示为pc，为了保持与http请求一致，我们需要注入页面js，来修改navigator.user

function toMobile() {
  var head = document.querySelector("head");
  if (!head) {
    setTimeout(turnPhone, 100);
    return;
  }
  var _turnP = document.createElement("script");
  _turnP.type = "text/javascript";
  _turnP.innerText = [
    "Object.defineProperty(window.navigator, 'userAgent', { get: function(){ return 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'; } });",
    "Object.defineProperty(window.navigator, 'vendor', { get: function(){ return 'Apple, Inc.'; } });",
    "Object.defineProperty(window.navigator, 'platform', { get: function(){ return 'iPhone'; } });"
  ].join("");
  head.appendChild(_turnP);
}

视图渲染

通常我们可以使用iframe，不过这个涉及到跨域，对dom入侵大等一系列问题，针对这里的场景特点废弃了iframe。使用在dom里渲染，首先需要修改html大小，这里也要通过插件，插件可以设置content-script，并且指定其在document_start时执行，这样就保证了在页面返回前，就设置了css，否则等html已经渲染一部分了再设置就无效了。

"content_scripts": [ {
      "all_frames": true,
      "js": [ "js/main.js" ],
      "css": ["css/main.css"],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_start"
   } ]

main.css里设置

html.terminal-mobile {
  width: 400px !important;
}

main.js里设置

document.querySelector("html").setAttribute("class", "udata-mobile");

现在从显示宽度上，似乎像手机的宽度了，但是有些元素却超出html的宽度，这类是样式主要是因为dom设置了position: fixed的元素，其定位是参照window，非html，所以其宽度是window.innerWidth，所以我们需要修改参照项，可以通过修改html的transform

html.terminal-mobile {
  width: 400px !important;
  transform: translate3d(0px, 0px, 0px);
}

现在再看，html的内容完全参照html定位了

我们加上手机外框，通常会考虑会上下padding一定大小后使用background-image，而这里样式我们需要在页面渲染前就设置，此时无法计算出html.height高度，所以只能用百分比，又不准确，所以使用border-box

html.udata-mobile {
  transform: translate3d(0px, 0px, 0px);
  height: 100%;
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-width: 80px;
  border-bottom-width: 80px;
  box-sizing: border-box; //将border设置进html height
  margin-left: 200px;
  width: 400px;
  border-color: transparent;
  border-style: solid;
  border-image: url(https://s.tbcdn.cn/g/udata/udata-pi/iphoneBg.png) 146 20
    stretch;
  background-color: rgb(255, 255, 255) !important;
}

box-sizing: border-box;将html:100%算进了border，再通过border-image来添加手机框，下图是demo的操作

事件模拟

最近更新于0001-01-01