Check Browser Compatibility: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>{{Template:Build a website}}</noinclude>
Check Browser Compatibility
 
Noun explanation
# allowed to interact: the solutions which (1) allowed to interact the web pages e.g.  click the link and test javascript (2) view the web snapshot
# view the snapshot only: only allowed to view the static web snapshot
 
==== checking Compatibility ====
* {{Gd}} [http://www.caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc] "Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers."
* [http://blog.miniasp.com/post/2013/07/14/HTML5-CSS3-JavaScript-JS-compatibility-resouces.aspx The Will Will Web | 前端工程研究:HTML/CSS/JavaScript 相容性檢查資源整理]
 
==== allowed to interact ====
===== desktop browser + mobile browser =====
cloud services for testing desktop browsers and mobile browsers
* [http://www.browserstack.com/ BrowserStack]''($)'' "Cross Browser Testing Tool. 100+ Browsers, Mobile, Real IE." [http://www.browserstack.com/list-of-browsers-and-platforms List of Browsers and Platforms for Cross Browser Testing]
** [https://chrome.google.com/webstore/detail/test-ie/eldlkpeoddgbmpjlnpfblfpgodnojfjl/related Test IE] for {{Chrome}}
* [https://saucelabs.com/home Sauce Labs: Mobile and Web App Testing Tools For Developers]''($)'': [https://saucelabs.com/docs/platforms supported Device/OS/Browser Platforms]
 
testing different screen resolution
* [[CSS_tools#.E4.B8.8D.E5.90.8C.E8.9E.A2.E5.B9.95.E8.A7.A3.E6.9E.90.E5.BA.A6.E6.AA.A2.E8.A6.96.E7.B6.B2.E9.A0.81| css tools]]
 
===== mobile browsers =====
: [[Image:Owl icon.jpg]] WARNING: Simulators/emulators for mobile browser testing is '''different''' from the browser for real mobile device.
* [http://www.mozilla.org/en-US/mobile/ Mozilla Firefox | Firefox for Android | Download Firefox to your mobile device] {{access | date =2012-06-06}} {{win}} {{linux}}
* [http://www.opera.com/developer/tools/mini/ Opera Mini simulator]. Require: Java installed
* [https://developer.chrome.com/devtools/docs/device-mode Device Mode Mobile Emulation] for {{chrome}}


Check Browser Compatibility
alternative
* {{Gd}} [http://www.caniuse.com/ Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.]
* [http://bluestacks.com/ BlueStacks] Run Android on Windows with BlueStacks for {{win}} & {{Mac}}
* [http://www.genymotion.com/ Genymotion] + VirtualBox 教學: [http://www.azofreeware.com/2013/08/genymotion-110-bluestacksandroid.html (魔神模擬器) Genymotion 2.2.2 - 比BlueStacks還專業的Android安卓手機模擬器 神魔之塔可以玩 - 阿榮福利味]


==== view web snapshot and test user behavior (allowed click the link and test javascript...) ====
===== desktop browser =====
===== desktop browser =====
One PC with different Internet Explorer versions 同一電腦可以有不同版本的Internet Explorer
One PC with different Internet Explorer versions 同一電腦可以有不同版本的Internet Explorer


current version: [http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home IE8] & previous version : IE7 available at
* [https://blogs.windows.com/msedgedev/2015/08/17/windows-10-virtual-machines-now-available-on-microsoft-edge-dev/#QZQ86LBwxcHOQOgo.97 Windows 10 virtual machines now available on Microsoft Edge Dev | Microsoft Edge Dev Blog] IE8, IE9, IE10, IE11, Microsoft Edge {{access | date = 2016-10-12}}
* {{Gd}} [http://finalbuilds.edskes.net/iecollection.htm Internet Explorer Collection]([http://blog.miniasp.com/post/2009/03/Useful-tools-Internet-Explorer-Collection.aspx 介紹]) IE1.0 ~ IE8 which allow to choose to install '''IE developer toolbar''' & '''Firebug Web development extension''' during the installation
* [http://finalbuilds.edskes.net/iecollection.htm Internet Explorer Collection]([http://blog.miniasp.com/post/2009/03/Useful-tools-Internet-Explorer-Collection.aspx 介紹])  
* [http://www.my-debugbar.com/wiki/IETester/HomePage IETester] IE5.5 ~ IE10 emulator {{exclaim}} IE9 & IE10 emulator not available on Windows XP
** various {{IE}} browser version: IE1.0 ~ IE8 which allow to choose to install '''IE developer toolbar''' & '''Firebug Web development extension''' during the installation
* [http://www.my-debugbar.com/wiki/IETester/HomePage IETester]  
** various {{IE}} browser version: IE5.5 ~ IE11 emulator {{exclaim}} IE9+ emulator not available on Windows XP
* [http://browserling.com/ browserling - interactive cross-browser testing in your browser] Run IE5~9 (Simulated by [http://www.my-debugbar.com/wiki/IETester/HomePage IETester])
* [http://browserling.com/ browserling - interactive cross-browser testing in your browser] Run IE5~9 (Simulated by [http://www.my-debugbar.com/wiki/IETester/HomePage IETester])
* Microsoft [http://expression.microsoft.com/en-us/dd565874.aspx Expression Web SuperPreview]([http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en download]) IE6, IE7, IE8->7 (compatibility view), IE8, [http://support.microsoft.com/kb/2445851?Browser=Firefox&Version=5 Fx 3.0~3.6]
* Microsoft [http://expression.microsoft.com/en-us/dd565874.aspx Expression Web SuperPreview]([http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en download]) IE6, IE7, IE8->7 (compatibility view), IE8, [http://support.microsoft.com/kb/2445851?Browser=Firefox&Version=5 Fx 3.0~3.6]
* Windows OS + IE v.10: go to menu: '''"developer tools"''' -> switch "browser mode" between: IE10, IE9, IE8, IE7


older version of IE also available at
older version of IE also available at
Line 27: Line 54:
* [http://www.microsoft.com/windows/virtual-pc/support/virtual-pc-2007.aspx Windows Virtual PC]  + [http://www.microsoft.com/en-us/download/details.aspx?id=11575 IE App Compat VHD from Official Microsoft] with different version of browser. For example you install IE v.6 on first virtual machine, and install IE v.7 on another virtual machine.  
* [http://www.microsoft.com/windows/virtual-pc/support/virtual-pc-2007.aspx Windows Virtual PC]  + [http://www.microsoft.com/en-us/download/details.aspx?id=11575 IE App Compat VHD from Official Microsoft] with different version of browser. For example you install IE v.6 on first virtual machine, and install IE v.7 on another virtual machine.  
* [http://www.vmware.com/products/thinapp/ VMware ThinApp]''($)''
* [http://www.vmware.com/products/thinapp/ VMware ThinApp]''($)''
* ... more on [[Virtual machine images]]


 
==== view the snapshot only ====
===== mobile browsers =====
* [http://browsershots.org/ Check Browser Compatibility, Cross Platform Browser Test - Browsershots] {{access | date = 2016-04-17}}
: [[Image:Owl icon.jpg]] WARNING: Simulators/emulators for mobile browser testing is '''different''' than the browser for real mobile device.
** various browser: desktop browser only
* [http://iphonetester.com/ iPhone 3G/4G tester - online website test emulator with flip] {{exclaim}} not check user agent {{access | date =2012-06-06}}
* [https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/ Website Screenshots & Responsive Design Screenshots] ([https://developer.microsoft.com/zh-tw/microsoft-edge/tools/screenshots/ 瀏覽器螢幕擷取畫面] ) {{access | date = 2016-04-17}}
* [http://www.mozilla.org/en-US/mobile/ Mozilla Firefox | Firefox for Android | Download Firefox to your mobile device] {{access | date =2012-06-06}} {{win}} {{linux}}
** various browser: IE 6.0-11.0, Chrome 42.0, Firefox 37.0, Safari 7.0, Safari 6.0 & Opera 12.16
* [http://www.opera.com/developer/tools/mini/ Opera Mini simulator]. Require: Java installed
** various device: Google Nexus 6, Google Nexus 9, iPhone 6 & iPad Air
 
: https://farm1.staticflickr.com/721/20922082366_2659222fba.jpg
alternative
: image hosted by [https://www.flickr.com/photos/planetoid/20922082366/in/dateposted-public/ flickr]
* [http://bluestacks.com/ Run Android on Windows with BlueStacks :: Android on PC :: Android Player for Windows | BlueStacks] {{win}}
* [http://www.danvine.com/icapture/ iCapture] 檢視網頁在 Chrome 裡看起來會像甚麼。 {{access | date = 2016-09-13}}
 
===== testing desktop browsers and mobile browsers =====
* [http://www.browserstack.com/ BrowserStack]''($)'' "Cross Browser Testing Tool. 100+ Browsers, Mobile, Real IE." [http://www.browserstack.com/list-of-browsers-and-platforms List of Browsers and Platforms for Cross Browser Testing]
** [https://chrome.google.com/webstore/detail/test-ie/eldlkpeoddgbmpjlnpfblfpgodnojfjl/related Test IE] for {{Chrome}}
* [https://saucelabs.com/home Sauce Labs: Mobile and Web App Testing Tools For Developers]''($)'': [https://saucelabs.com/docs/platforms supported Device/OS/Browser Platforms]
 
==== view web snapshot only ====
* [https://browserlab.adobe.com/en-us/index.html Adobe® BrowserLab]([http://help.adobe.com/en_US/cslive/cs/using/WS58a04a822e3e5010-7b304dbd1263439ac1b-8000.html online help]) Chrome 3.0 Windows; Firefox 2.0-3.6 Windows / OS X , Internet Explorer 6.0 - 8.0 Windows; Safari 3.0 - 4.0 OS X
* [http://browsershots.org/ Check Browser Compatibility, Cross Platform Browser Test - Browsershots]
 


See also  
See also  
Line 52: Line 70:
* [https://addons.mozilla.org/en-US/firefox/addon/59 User Agent Switcher :: Firefox Add-ons][http://chrispederick.com/work/user-agent-switcher/]for {{Fx}}
* [https://addons.mozilla.org/en-US/firefox/addon/59 User Agent Switcher :: Firefox Add-ons][http://chrispederick.com/work/user-agent-switcher/]for {{Fx}}


[[Category:WebDesign]] [[Category:Browser]]
further reading
* [https://medium.com/@stothelios/9-tools-to-test-your-site-9ee997c79e48 9 tools to test your site — Medium]
 
<noinclude>{{Template:Build a website}}</noinclude>
 
[[Category:WebDesign]] [[Category:Browser]] [[Category:Mobile]]

Revision as of 12:01, 24 January 2019

Check Browser Compatibility

Noun explanation

  1. allowed to interact: the solutions which (1) allowed to interact the web pages e.g. click the link and test javascript (2) view the web snapshot
  2. view the snapshot only: only allowed to view the static web snapshot

checking Compatibility

allowed to interact

desktop browser + mobile browser

cloud services for testing desktop browsers and mobile browsers

testing different screen resolution

mobile browsers
Owl icon.jpg WARNING: Simulators/emulators for mobile browser testing is different from the browser for real mobile device.

alternative

desktop browser

One PC with different Internet Explorer versions 同一電腦可以有不同版本的Internet Explorer

older version of IE also available at

other desktop browser available at

alternative: Install different virtual machines, ex:

view the snapshot only

20922082366_2659222fba.jpg
image hosted by flickr
  • iCapture 檢視網頁在 Chrome 裡看起來會像甚麼。 [Last visited: 2016-09-13]

See also

further reading


Web site design and development process