Check Browser Compatibility: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
(16 intermediate revisions by one other 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


Check Browser Compatibility
==== Checking the 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." {{access | date=2020-08-23}}
* [http://www.browsersupport.net/ Browser Support] 教學: [http://csscoke.com/2013/10/09/css_and_browser_support/ 查詢CSS與瀏覽器支援度的網站 · CSS可樂]
* {{Gd}} [https://www.caniemail.com/ Can I email… Support tables for HTML and CSS in emails]
* [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 =====
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}}
 
alternative
* [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安卓手機模擬器 神魔之塔可以玩 - 阿榮福利味]
 
===== 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]
Line 32: Line 57:
* ... more on [[Virtual machine images]]
* ... more on [[Virtual machine images]]


===== mobile browsers =====
==== view the snapshot only ====
: [[Image:Owl icon.jpg]] WARNING: Simulators/emulators for mobile browser testing is '''different''' than the browser for real mobile device.
* [http://browsershots.org/ Check Browser Compatibility, Cross Platform Browser Test - Browsershots] {{access | date = 2016-04-17}}
* [http://iphonetester.com/ iPhone 3G/4G tester - online website test emulator with flip] {{exclaim}} not check user agent {{access | date =2012-06-06}}
** various browser: desktop browser only
* [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}}  
* [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.opera.com/developer/tools/mini/ Opera Mini simulator]. Require: Java installed
** 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 6, Google Nexus 9, iPhone 6 & iPad Air
alternative
* [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安卓手機模擬器 神魔之塔可以玩 - 阿榮福利味]
 
===== 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]
 
==== view static web snapshot only ====
* [http://browsershots.org/ Check Browser Compatibility, Cross Platform Browser Test - Browsershots] {{access | date = 2015-08-28}}
** various browser
* [http://dev.modern.ie/tools/screenshots/ Website Screenshots & Responsive Design Screenshots : Microsoft Edge Dev] {{access | date = 2015-08-28}}
** various browser: Opera 12.16, Safari 7.0, IE 11.0 Desktop, Firefox 37.0 & Chrome 42.0
** various device: Google Nexus 7, Samsung Galaxy 7, 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)、作業系統、螢幕解析度、搜尋引擎市占率統計表]]  
* [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}}
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]]
[[Category:WebDesign]] [[Category:Browser]] [[Category:Mobile]]

Revision as of 16:41, 23 August 2020

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 the 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