手机预览 & 调试

图片超过 300KB 就需要压缩(否则下载很慢) 搜索 jpg/png在线压缩

怎么兼容手机？

第1步 补齐meta:vp  (<meta name="viewport">的缩写)

//宽度跟设备宽度一样，默认缩放比例是一倍，最小/最大的是1倍，用户不准缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

第2步 img max-width

img{ max-width:100%;}   

真机运行的话也要加meta:vp

手机预览页面

一.用wifi调试手机

1.通过hs -c-1把给出的IP全都试一遍

2.把编辑好的地址发给手机，手机可以直接打开页面

  例如 http://127.0.0.1:8080/src/index.html

二.映射端口(不在同一Wi-Fi下也能调试手机)

过程：

打开开发者工具-> More tools-> Remote devices(远程设备)->点击按钮Port forwarding映射端口(添加端口)

补充：如果找不到【远程设备】，地址栏里输chrome://inspect，回车进入

手机输入地址

电脑调试手机页面

用chrome远程调试(在电脑上调试手机版)

1. Mac

safari远程调试 -csdn

2. window

chrome远程调试 -csdn //不看csdn