如何使用Chrome模拟手机浏览器测试移动端站点

最新推荐文章于 2023-12-28 00:15:00 发布
最新推荐文章于 2023-12-28 00:15:00 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billfeller/article/details/39968309
版权
本文介绍了如何在Chrome 37中使用开发者工具模拟不同型号的手机设备，进行移动端站点的测试。通过菜单或快捷键打开控制台，启用模拟器，选择目标设备模型，访问移动网站，并推荐了将控制台固定到右侧以优化测试视野的方法。
摘要由CSDN通过智能技术生成 
  作者：zhanhailiang 日期：2014-10-10

环境说明： Chrome 37.0.2062.124 m

1. 通过【菜单→工具→开发者工具|Javascript控制台】或【快捷键Ctrl+Shift+I|J】打开Chrome控制台：

最低0.47元/天 解锁文章
billfeller
关注
专栏目录
chrome 模拟不同pc环境_在PC上测试移动端网站和模拟手机浏览器的5大方法
weixin_39843677的博客
12-22 1422
最近公司要开发网站的移动版，让我准备准备知识，话说本人开发移动网站的经验还真不多，最悲剧的事情就是我的手机是个经典的诺基亚，而且公司还不给配手机，这是有多讨厌，没办法，没有手机只能用电脑模拟了;查了很多资料，尝试了大部分方法，下面将这一天的努力总结下分享给大家，也让大家免去看那么多文章，以下介绍的方法，都是本人亲自测试成功的方法，测试环境winxp。一、Chrome*浏览器chrome模拟手机总共...
chrome模拟移动端
imkaifan的博客
09-02 1401
1、开发移动端，尤其是一些大屏项目的时候，很容易就用Responsive然后直接在后面设置一些值，来模拟，但是在一些情况下，直接这样设置，会出现匹配比较乱。页面比你实际设计的值大了或者小了。 2、避免上述情况，正确的设置方式。（直接添加一个你设置相应尺寸的设备） 都知道Chrome浏览器可以模拟真机尺寸，进行调试开发很方便， 但是如果你的真机在预制的配置参数中没有，而且又不知道该输入什么尺寸参数，该怎么办？ 首先如果不知道自己手头的设备的可视屏幕尺寸是多少，那么就在代码里写下以下这些代码
chrome33下模拟手机显示页面（开启设备模拟器）
Jin's blog
04-20 2806
chrome33下模拟手机显示页面（开启设备模拟器）
chrome找不到模拟移动端
windlee09的专栏
08-13 742
原因是 chrome的版本不同位置更改了 1.36版本 开启的方式是
【转载】用谷歌浏览器来当手机模拟器
木鱼与代码
08-17 291
  摘自 http://blog.s135.com/chrome_phone/   谷歌Android：   chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0...
移动端使用谷歌浏览器来实时测试你的webapp
yakelande的博客
08-14 1691
在做webap的时候，会遇到这个问题，利用谷歌自带的测试工具调好样式，部署到服务器后在手机上测试的时候会有误差，这时候如果能够在手机上实时预览效果的话简直棒极了 1.USB 连接你的安卓手机，打开USB调试。确保USB连接正常 2.电脑运行你的webapp，在开发者工具中打开 Remote devices 菜单。 3.在左边选择 Settings ，点击 Add Rule 输入端口号...
在PC上测试移动端网站和模拟手机浏览器的5大方法
玫瑰余香20100615的专栏
05-22 2770
详细出处参考：http://www.jb51.net/softjc/144941.html
手机网站列表HTML5页面
11-03
2. 调试：Chrome DevTools和Firefox Developer Tools提供强大的移动设备模拟和调试功能。 3. 测试：利用BrowserStack或CrossBrowserTesting等在线工具进行多浏览器兼容性测试。 总结，手机网站列表HTML5页面是利用...
移动端 移动自适应 移动端meta元标签
weixin_44482244的博客
09-19 454
【前言】2019.9.19 【内容】 移动端 移动自适应 移动端meta元标签… （1）浏览器的默认字体大小：16px （2）chrome字体最小限制：12px （3）CSS单位分为绝对单位和相对单位 CSS中，单位分为两类 （1）绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的； （2）相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。 CSS绝对单...
chorme调试移动端网页
breakmikebo的博客
06-29 1571
浏览器调试网页
常用浏览器模拟移动端方法
江湖 - 郎中 - 路
12-01 992
随着移动设备的大量增加，响应式布局的使用越来越多，各个浏览器厂商也纷纷推出移动端模拟的方法，总结如下。 1、chrome 按F12弹出开发者工具，按上图所示，可以选择移动设备模型，可以设置UA，网络，屏幕大小，GPS信息，设备角度，等各种各种参数，功能不错。 2、firefox firefox的开发者工具也提供了类似的功能，直接上图，点击响应式布局工具，就可以了，功能稍弱，
Chrome 浏览器调试移动端
BADAO_LIUMANG_QIZHI的博客
08-22 1881
1.手机用数据线连接电脑，打开USB调试，选择连接方式为媒体设备MTP。 2.电脑打开谷歌浏览器，输入 ：chrome://inspect/#devices ，手机上打开APP。 3.会看到如下图的情况（上面会看到你所连接的设备的名称和信息，下面就是当前设备上可以用于在电脑上调试的页面的一下信息，地址、标题、网页大小。。。，如果没有显示设备信息，则表示没有连接好，可以插拔手机或关闭调试模式...
探究Chrome仿真模拟设备时Click区域不准确问题
最新发布
q1003675852的博客
12-28 1239
在Chrome DevTools中开启仿真设备（微信开发者工具也有类似问题），如果页面元素有绑定click时，实际点击事件响应区域会溢出绑定事件的对象范围。本文通过实验代码重现问题情景，并通过查阅资料给出了调查结果。
Chrome模拟手机浏览器（iOS/Android）的三种方法，亲测无误！
weixin_34090562的博客
12-30 7032
大网站都有推出自己的手机访问版本页面，不管是新闻类还是视频网站，我们在电脑是无法直接访问到手机网站的，比如我经常访问一个3g.qq.com这个手机站点，如果在电脑上直接打开它，则会跳转到其它页面，一般我会在网上查找在线WAP浏览器，进入之后输入手机网址再访问。 　　其实根本不用这么麻烦，如果你有在使用Google Chrome浏览器，那就很简单了。看了一下网上的相关教程，总结起来共有三种方法，原...
Chrome自带移动设备模拟器，适合移动端网页开发
youngage的专栏
03-26 2631
技术文档 http://blog.csdn.net/iefreer/article/details/12653193 简介 http://blog.csdn.net/isaisai/article/details/19687699 非常好用，适合移动开发 1.emulation 在桌面上模拟多种设备 Iphone3--5，ipad，Nexus S --6 2.能
chrome模拟微信内置浏览器
09-19
Chrome浏览器可以模拟微信内置浏览器的功能，通过一些设置和扩展来实现。首先，在Chrome浏览器中，我们可以使用开发者工具来模拟各种移动设备的页面展示效果，其中包括了模拟微信内置浏览器的设置选项。我们可以在Chrome的开发者工具中选择“切换设备工具栏”，然后选择“Custom...”选项，手动输入设备的尺寸和UA字符串等信息，来模拟微信内置浏览器的页面展示。 其次，Chrome浏览器中有一些扩展可以帮助模拟微信内置浏览器的一些特性和行为。例如，Chrome Web Store中有一款名为“WeChat Desktop”的扩展，可以将web页面以微信内置浏览器的方式展示，包括页面宽度、字体大小、自动检测电话号码和微信表情等特性。 另外，Chrome浏览器的开发者工具还提供了一些调试功能，帮助开发者模拟微信内置浏览器的环境。通过这些调试功能，开发者可以在Chrome中进行移动端页面的开发、调试和测试，确保页面在微信内置浏览器中的正常展示和功能运行。 总结来说，通过Chrome浏览器的开发者工具和相关扩展，我们可以模拟微信内置浏览器的页面展示效果和功能行为，方便开发者进行移动端页面的调试和测试工作。这样可以提高开发效率和代码质量，确保页面在微信内置浏览器中的良好用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值