耀世娱乐注册_华宇娱乐平台注册代理 知识支撑梦想_分享城市新象

[教学] 电脑模拟 Android、iOS 行动网页适用

阅读: 279| 点赞:750| 收藏:317

[教学] 电脑模拟 Android、iOS 行动网页适用

智慧手机与平板电脑行动装置市占率可说是越来越高,想必不少网站开发者、设计人员也将页面新增行动装置或是自适应网页设计介面??开发过程无奈手边没机器没法除错很麻烦??其实你可以透过电脑环境打造手机行动网页模拟浏览器,无论是常用 Google Chrome & Firefox & Opera 浏览器皆适用,透过变更「Use Agent」参数模拟 Android、iPhone、iPad 甚至是 IE、BlackBerry(黑莓机) 都不是问题,下面一系列操作教学赶快来瞧瞧。



简介:Google Chrome & Firefox & Opera 浏览器载点

Firefox:http://sofun.tw/firefox/

Opera:http://sofun.tw/opera/

Google Chrome:http://sofun.tw/google-chrome/

[教学] 电脑模拟 Android、iOS 行动网页适用

上面这张示意图为 "简单生活Easylife" 使用电脑浏览器看到的画面,因为有开发手机版专用布景,所以使用行动装置看到的画面会完全不一样,究竟在电脑版 PC 环境如何模拟呈现手机、平板电脑浏览器画面??

如何模拟手机/平板电脑 (Google Chrome):

[教学] 电脑模拟 Android、iOS 行动网页适用

Google Chrome 浏览器滑鼠右键点选【检查】→【Toggle device toolbar】

或着是直接按 Ctrl + Shift +M 就能够快捷键直接开启运作此功能

[教学] 电脑模拟 Android、iOS 行动网页适用

[教学] 电脑模拟 Android、iOS 行动网页适用

接着重新整理网页,便发现切换至行动装置页面

按一下 Responsive 可看到多款手机平板可供选择

若找不到你的装置再按 Edit 即可新增至名单啰

其操作步骤比起过往更加简单好上手,赶快学起来

[教学] 电脑模拟 Android、iOS 行动网页适用

若是觉得 Google Chrome 浏览器设定麻烦可以下载外挂套件

※ Ultimate User Agent Switcher 载点:网址

[教学] 电脑模拟 Android、iOS 行动网页适用

下载安装完成发现网址列多了红色按钮

按下 "立即启用" 模拟的装置即可!!

[教学] 电脑模拟 Android、iOS 行动网页适用

红色钮会显示目前模拟浏览器装置

取消再点选 "立即启用" 就可以了!!

如何模拟手机/平板电脑 (Firefox 火狐):

[教学] 电脑模拟 Android、iOS 行动网页适用

套件名称:User Agent Switcher

网址:http://download.sofun.tw/firefox-user-agent-switcher/

[教学] 电脑模拟 Android、iOS 行动网页适用

下载安装完成导航列 – 工具 – Default User Agent 选择装置。

如何模拟手机/平板电脑 (Opera):

[教学] 电脑模拟 Android、iOS 行动网页适用

新版本 Opera 浏览器採 Chromium 核心架构

所以介面、操作跟 Google Chrome 相去不远

因此只需要参照前面介绍的教学步骤就好了。

[教学] 电脑模拟 Android、iOS 行动网页适用 [教学] 电脑模拟 Android、iOS 行动网页适用

或着可以下载 Opera Mobile – 电脑模拟手机画面浏览器套件:网址

总结:所有模拟行动装置网页浏览器比较,我觉得还是 Google Chrome 操作最简便,此外还可以藉由内建 "检查元素" 功能来进行即时修改、除错,比起 Firefox 还得要安装 Firebug 套件来说方便许多,最重要的还是得依据你的开发习惯来使用,顺手才是最重要的!!



上一篇:
下一篇:
相关文章: