Check Browser Compatibility: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
Check Browser Compatibility
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."
* {{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://www.browsersupport.net/ Browser Support] 教學: [http://csscoke.com/2013/10/09/css_and_browser_support/ 查詢CSS與瀏覽器支援度的網站 · CSS可樂]
* [http://blog.miniasp.com/post/2013/07/14/HTML5-CSS3-JavaScript-JS-compatibility-resouces.aspx The Will Will Web | 前端工程研究：HTML/CSS/JavaScript 相容性檢查資源整理]
* [http://blog.miniasp.com/post/2013/07/14/HTML5-CSS3-JavaScript-JS-compatibility-resouces.aspx The Will Will Web | 前端工程研究：HTML/CSS/JavaScript 相容性檢查資源整理]


==== view web snapshot and test user behavior (allowed click the link and test javascript...) ====
==== allowed to interact ====
===== desktop browser + mobile browser =====
===== desktop browser + mobile browser =====
cloud services for testing desktop browsers and mobile browsers
cloud services for testing desktop browsers and mobile browsers
Line 16: Line 21:
===== mobile browsers =====
===== mobile browsers =====
: [[Image:Owl icon.jpg]] WARNING: Simulators/emulators for mobile browser testing is '''different''' from the browser for real mobile device.
: [[Image:Owl icon.jpg]] WARNING: Simulators/emulators for mobile browser testing is '''different''' from the browser for real mobile device.
* [http://iphonetester.com/ iPhone 3G/4G tester - online website test emulator with flip] {{exclaim}} not check user agent {{access | date =2012-06-06}}
* [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.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
* [http://www.opera.com/developer/tools/mini/ Opera Mini simulator]. Require: Java installed
Line 28: Line 32:
One PC with different Internet Explorer versions 同一電腦可以有不同版本的Internet Explorer
One PC with different Internet Explorer versions 同一電腦可以有不同版本的Internet Explorer


* {{Gd}} [http://finalbuilds.edskes.net/iecollection.htm Internet Explorer Collection]([http://blog.miniasp.com/post/2009/03/Useful-tools-Internet-Explorer-Collection.aspx 介紹])  
* [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}}
* [http://finalbuilds.edskes.net/iecollection.htm Internet Explorer Collection]([http://blog.miniasp.com/post/2009/03/Useful-tools-Internet-Explorer-Collection.aspx 介紹])  
** various {{IE}} browser version: IE1.0 ~ IE8 which allow to choose to install '''IE developer toolbar''' & '''Firebug Web development extension''' during the installation
** 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]  
* [http://www.my-debugbar.com/wiki/IETester/HomePage IETester]  
Line 51: Line 56:
* ... more on [[Virtual machine images]]
* ... more on [[Virtual machine images]]


==== view static web snapshot only ====
==== view the snapshot only ====
* [http://browsershots.org/ Check Browser Compatibility, Cross Platform Browser Test - Browsershots] {{access | date = 2015-08-28}}
* [http://browsershots.org/ Check Browser Compatibility, Cross Platform Browser Test - Browsershots] {{access | date = 2016-04-17}}
** various browser
** various browser: desktop browser only
* [http://dev.modern.ie/tools/screenshots/ Website Screenshots & Responsive Design Screenshots : Microsoft Edge Dev] {{access | date = 2015-08-28}}
* [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}}
** various browser: Opera 12.16, Safari 7.0, IE 11.0 Desktop, Firefox 37.0 & Chrome 42.0
** various browser: IE 6.0-11.0, Chrome 42.0, Firefox 37.0, Safari 7.0, Safari 6.0 & Opera 12.16
** various device: Google Nexus 7, Samsung Galaxy 7, iPhone 6 & iPad Air
** various device: Google Nexus 6, Google Nexus 9, iPhone 6 & iPad Air
: https://farm1.staticflickr.com/721/20922082366_2659222fba.jpg
: https://farm1.staticflickr.com/721/20922082366_2659222fba.jpg
: image hosted by [https://www.flickr.com/photos/planetoid/20922082366/in/dateposted-public/ flickr]
: image hosted by [https://www.flickr.com/photos/planetoid/20922082366/in/dateposted-public/ flickr]
* [http://www.danvine.com/icapture/ iCapture] 檢視網頁在 Chrome 裡看起來會像甚麼。 {{access | date = 2016-09-13}}
See also  
See also  
* [[Research_surveys#全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表 | 全球瀏覽器(Browser share)、作業系統、螢幕解析度、搜尋引擎市占率統計表]]  
* [[Research_surveys#全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表 | 全球瀏覽器(Browser share)、作業系統、螢幕解析度、搜尋引擎市占率統計表]]  

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

Retrieved from "https://wiki.planetoid.info/index.php?title=Check_Browser_Compatibility&oldid=20438"