主页 > 分享地理 >iPhone、Android手机模拟器 (Google Ch >

iPhone、Android手机模拟器 (Google Ch

2020-05-21 21:50:08 来源 : 分享地理 点击 : 161

在Windows作业系统上,很多人常常在手机模拟器,想要透过PC来模拟Android或是iPhone的介面,可是往往很多模拟器的使用方式都非常麻烦,就算找到免费的手机模拟器,可能看完介绍就把网页关闭。不过别担心,如果你的手机模拟器用途只是单纯要来做网页测试,想要看看自己的网站在iPhone、iPad甚至是Android上看的样式,那幺Google Chrome内建的手机模拟器就足够你使用了。

很多人不知道其实在Google Chrome的开发者工具中,有一个模拟器的功能,可以让你的Google浏览器模拟成行动装置,或者是其他浏览器,透过「Use Agent」的参数设定,可以让你的Google Chome模拟成Android、iPhone、iPad、BlackBerry(黑莓机)、IE7、IE8、IE9、Firefox等等的浏览器,让你修改网页一次看到所有介面,让网页修得更漂亮。

透过Google内建的开发者工具,我们就可以模拟多种的行动装置画面(每一个装置又不同的解析度),并且可以透过内建的开发者工具对网页调整CSS、HTML设定或者是bug修正,使用上十分的方便,在网页相容性校正上,也有所帮助。这个Google Chrome手机模拟器功能其实长得非常的密,不特别去找的话,一般使用者根本不会发现这样的功能。

使用Google Chrome的iPad、iPhone、Android模拟器有何作用,这对网页设计师来讲,在做手机版网页的微调确实有极大的帮助,同时可以透过单一浏览器就可以一口气校正IE、Firefox、Google Chrome、iPad、iPhone、Android以及黑莓机装置,是不是很方便呢?看到这里,你想要找的是Android的APP模拟器,那你可能要改用BlueStacks。

如果没有Google浏览器,请先下载:Google Chrome最新版下载。

第1步  以香肠炒鱿鱼本站为例,这是一般电脑看到的画面,但是这样的画面用到手机上看就不适合了,因为画面完全不符合,所以香肠先前有用WordPress专用手机版的外挂,去开发WordPress专属手机版布景。

iPhone、Android手机模拟器 (Google Ch

第2步  接着我们要启用Google Chome的手机模拟器,请先点右上角的图案,再点选【工具】→【开发者工具】,或者是直接快捷键﹝Ctrl﹞+﹝Shit﹞+﹝J﹞。

iPhone、Android手机模拟器 (Google Ch

第3步  开启后,请看到开发人员工具右下角,那边有一颗很不起眼的齿轮,请点选。

iPhone、Android手机模拟器 (Google Ch

第4步  接着你就会看到一个令人惊豔的设定,这边全英文。点选【Overrides】并将「User Agent」打勾,下拉选单中可以选择您要的介面。

iPhone、Android手机模拟器 (Google Ch

第5步  这边支援多款的介面,从IE、Firefox、Chrome、Android、BlackBerry、iPhone、iPad各式各样的解析度都有,选择你需要的吧!

iPhone、Android手机模拟器 (Google Ch

第6步  除了勾选「User Agent」别忘了勾选「Device metrics」,最后点一下「F5」重新整理网页。

iPhone、Android手机模拟器 (Google Ch

第7步  重新整理后,网页就会变成手机版了。是不是很简单呢?这就是香肠炒鱿鱼的手机版,清单式的文章列表,宽度解析度完全符合手机专属。

iPhone、Android手机模拟器 (Google Ch

相关阅读