当前位置： 文江博客话题详情

如何模拟手机浏览器

发布于 2022-09-06 02:23:17 字数 89 浏览 20 评论 0

如题，现在搞前端移动开发的是怎么模拟的，用几个FF插件或者Chrome插件吗？
有其它软件模拟不，请推荐几个插件，或者软件的，可能问的不对题，还希望理解

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

北方。的韩爷 2022-09-13 02:23:18

如果只是针对 responsive 页面模拟的话，可以像下面这样
YkbaV.gif

回复
幸福％小乖 2022-09-13 02:23:18

Responsive Design Trick

将以下内容添加至浏览器书签：

javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive Design Testing</title><style>body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }.wrapper { width: 6000px; }.frame { float: left; }h2 { margin: 0 0 5px 0; }iframe { margin: 0 20px 20px 0; border: 1px solid #666; }</style></head><body><div class="wrapper"><div class="frame"><h2>240<span> x 320</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="240" height="320"></iframe></div><div class="frame"><h2>320<span> x 480</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe></div><div class="frame"><h2>480<span> x 640</span> <small>(small tablet)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe></div><div class="frame"><h2>768<span> x 1024</span> <small>(tablet - portrait)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe></div><div class="frame"><h2>1024<span> x 768</span> <small>(tablet - landscape)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe></div><div class="frame"><h2>1200<span> x 800</span> <small>(desktop)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe></div></div></body></html>')

然后打开需要模拟的网页，点击这个书签，so easy。

请输入图片描述

UA Trick

安装这个Chrome Extension
https://chrome.google.com/webstore/detail/user-agent-switcheruserag/ighgcligfbemmpnidpkhikmnmeohfafb

回复
[旋木] 2022-09-13 02:23:18

如果仅仅是简单的 responsive 页面模拟的话，Chrome 和 FF 就不需要装插件了。两者都能在审查元素里，找这个功能，可以模拟手机屏幕尺寸，改变页面显示大小。如图：

  1. Chrome 的是打开审查元素，点击右下角的齿轮设置，然后选择 Overrides，设置需要的屏幕尺寸即可。
    chrome
  2. Firefox 的也一样是打开查看元素，不过直接在它右上角可以找到这个按钮。
    firefox

其次，还有各种各样的在线测试工具：
http://www.leiphone.com/warlial-responsive-tool.html

回复
丿*梦醉红颜 2022-09-13 02:23:18

想问LS画的图用什么软件搞定的。

回复
甜味超标? 2022-09-13 02:23:17

download.png

Chrome开发人员工具里面就有现在的设置选项，可以模拟手机浏览器的，或者帮我一起改进这个项目。 https://github.com/greatghoul/mobivie...

回复
记忆で 2022-09-13 02:23:17

就其跟原来说就是更改浏览器向服务器发送的User Agent。

来个FireFox的: User Agent Switcher
https://addons.mozilla.org/en-US/fire...

回复
最近可好 2022-09-13 02:23:17

chrome 插件：User-Agent Switcher for Chrome
屏幕快照-2012-11-19-下午5.19.32.png

mac版safari：开发工具——用户代理
屏幕快照-2012-11-19-下午5.16.28.png

回复
~没有更多了~

关于作者

仲春光

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_aHcEbj

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

寻找我们的幸福

文章 0 评论 0

把昨日还给我

文章 0 评论 0

wj_zym

文章 0 评论 0

巴黎夜雨

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文