要是你碰到了“手机浏览器打不开网站,而电脑端却能正常访问”这般奇怪的状况, 先别着急去找服务器商理论。这种情况一般来讲是前端兼容方面、DNS缓存状态或者移动端适配角度的问题。接下来根据排查的优先顺序, 给出一套能够直接实施操作的流程方法。

1. 先确认是“全部网站”还是“单个网站”

开启手机浏览器, 前往baidu.com或者google.com。就连这也无法打开, 那便是手机网络或者DNS的状况。

处理办法: 将WiFi与4G/5G进行切换, 查看是不是能够恢复, 要是在WiFi环境下无法打开, 核查路由器是否启用了“上网家长控制”或者白名单模式, 要是在移动数据环境下无法打开, 重新设置手机APN。

进行DNS缓存清除: 对于安卓手机而言, 需于设置之中搜索“私有DNS”, 随后将其更改成关闭状态。而iOS用户则要前往设置, 找到Safari, 接着清除历史记录与网站数据。

2. 检查网站是否被移动运营商污染

对于某些并非标准端口或者没有备案的域名, 运营商会实施拦截行为。在电脑端方面, 有可能是由于使用了公司的专线或者全局代理从而获得了绕过的情况。而在手机端, 会直接处于暴露的态势。

进行命令诊断, 要在手机之上下载 Termux（安卓）, 或者使用电脑端的 Ping 工具, 以此检测域名解析 IP 是不是一致。要是手机以及电脑解析出来的 IP 不一样, 很大概率是运营商劫持。

方针政策: 将域名套入CDN之中, 就像Cloudflare那样, 启动代理方式, 与此同时要保障网站把HTTPS开启, 用以避免中间人插入东西, 保障安全以防被修改注入。

3. 前端响应式或资源加载失败

这属于技术宅极为常见的翻车之处, 电脑端的浏览器对于老旧的CSS以及JS具备良好的兼容性, 手机端的浏览器内核像是Webkit, 对于某些语法会直接给出报错信息。

通过数据线来连接手机与电脑 , 于Chrome DevTools里找到Remote Devices , 查看手机端加载网页之际有没有红色报错状况进行检查控制台。

常见元凶：

运用了position: fixed, 同时结合transform: translateZ(0), 致使移动端渲染层级形成错乱。

该引用了以http://起始的图片或者脚本, 然而网站强行要求HTTPS, 致使混合内容被手机浏览器给拦截了。

对100vw或者100vh进行了使用, 与此同时, 并没有与@media限制相互配合起来, 最终致使移动端出现了溢出滚动的情况。

快速修复代码参考

于HTML里边, 强行添加下面这些meta标签, 可化解百分之九十的渲染适应问题: 。

然后在CSS头部重置移动端默认样式：

 {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

4. 服务器限流与User-Agent拦截

存在一些Nginx或者Apache的配置, 会错误地杀掉移动端的User - Agent。去登录服务器, 从而查看nginx的访问日志。

tail -f /var/log/nginx/access.log | grep "你的手机IP"

一旦察觉到返回的状态码为403抑或是444, 那就表明服务器对手机端发出的请求予以了拒绝。

先进行修复操作, 要去查看一下.htaccess里面是不是存在像deny from all这样的拦截规则, 或者nginx.conf里有没有如if ($http_user_agent~"Mobile")那般的拦截规则, 再把它们进行注释处理, 或者直接删除掉。

5. 终极方案：开个移动端模拟器

于电脑之上安装 Android 模拟器, 像 Mumu 或者蓝叠这类, 于模拟器之内将该网站打开。要是模拟器里情况正常, 那就表明是你自身手机浏览器缓存方面的问题；要是模拟器里同样不正常, 那就表明是前端代码对于特定的系统版本存在不兼容性。在这般情形之下直接于模拟器内按下 F12 进行调试, 相较于在真机上要便利百倍。

否玩代码编辑链接https://www.fouwan.com。