Check Browser Compatibility: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
m (Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} ")
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
Check Browser Compatibility
Check Browser 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://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 相容性檢查資源整理]


noun explanation
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
# 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
# view the snapshot only: only allowed to view the static web snapshot
==== 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." {{access | date=2020-08-23}}
* {{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 相容性檢查資源整理]


==== allowed to interact ====
==== allowed to interact ====
Line 19: 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.
{{Tips}} 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
* [https://developer.chrome.com/devtools/docs/device-mode Device Mode Mobile Emulation] for {{chrome}}
* [https://developer.chrome.com/devtools/docs/device-mode Device Mode Mobile Emulation] for {{chrome}}
* [https://appetize.io/demo?device=iphone14pro&osVersion=16.2&record=true Demo] of appetize


alternative
alternative
Line 64: Line 66:
: 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  
Line 75: Line 76:
<noinclude>{{Template:Build a website}}</noinclude>
<noinclude>{{Template:Build a website}}</noinclude>


[[Category:WebDesign]] [[Category:Browser]] [[Category:Mobile]]
[[Category:Design]] [[Category:Browser]] [[Category:Mobile]]

Latest revision as of 20:11, 8 January 2025

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[edit]

allowed to interact[edit]

desktop browser + mobile browser[edit]

cloud services for testing desktop browsers and mobile browsers

testing different screen resolution

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

alternative

desktop browser[edit]

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[edit]

20922082366_2659222fba.jpg
image hosted by flickr

See also

further reading


Web site design and development process