Là nhà thiết kế web, đây là một câu hỏi mà chúng tôi luôn được hỏi. Chúng tôi phác thảo lý do tại sao các trang web trông khác nhau trên các máy tính và trình duyệt khác nhau.

Bạn đang xem : tại sao các trang web trông khác nhau trên các trình duyệt khác nhau

Là nhà thiết kế trang web, chúng tôi dành cả cuộc đời mình trước màn hình máy tính. Chúng tôi không ngừng xây dựng các trang web cho khách hàng – khởi chạy, thử nghiệm và thiết lập trực tiếp các sáng tạo của chúng tôi trên internet.

Nếu có một câu hỏi mà chúng tôi nhận được nhiều hơn bất kỳ câu hỏi nào khác, đó là “tại sao trang web của tôi trông hơi khác trên các máy tính hoặc trình duyệt khác nhau?” Bây giờ chúng tôi ước có một câu trả lời dễ dàng cho câu hỏi này nhưng nó hơi phức tạp nên chúng tôi sẽ thử chia nhỏ và giải thích nó theo cách tốt nhất có thể.

Có ba yếu tố chính thay đổi cách một trang web được hiển thị. Độ phân giải màn hình máy tính của bạn, đầu ra màn hình cạc đồ họa và màn hình và trình duyệt. Đây là những yếu tố có thể thay đổi mạnh mẽ cách hiển thị trang web của bạn. Hãy chia nhỏ ba điều này một chút.

Độ phân giải màn hình thay đổi cách hiển thị của trang web như thế nào?

Độ phân giải màn hình là số lượng pixel trên và dưới màn hình của bạn. Ví dụ: nếu độ phân giải màn hình của bạn là 1024 x 768, bạn sẽ hiển thị chiều rộng 1024 pixel (trên màn hình của bạn) và 768 pixel chiều cao (lên và xuống). Một pixel tương đương với dấu chấm ở trên cùng của i).

Giờ đây, chỉ để làm cho mọi thứ thực sự thú vị, cùng một màn hình có thể có các độ phân giải màn hình khác nhau tùy thuộc vào khả năng hiển thị kích thước màn hình của cạc đồ họa của bạn. Vì vậy, tùy thuộc vào số lượng pixel mà màn hình của bạn có thể hiển thị, thì càng nhiều pixel càng có thể vừa với màn hình.

Vì vậy, một màn hình có độ phân giải màn hình cao và có thể hiển thị nhiều pixel hơn (ví dụ: 1920 x 1080) sẽ hiển thị nhiều hơn một màn hình hiển thị ít pixel hơn (1280 x 800).

Giờ đây, hầu hết các trang web được xây dựng bằng cách sử dụng thiết kế đáp ứng, chúng sẽ sắp xếp các phần tử của trang web cho một kích thước màn hình cụ thể. Ví dụ: đây là cách trang web Marketeam được hiển thị ở một số độ phân giải màn hình phổ biến hơn: –

1920×1080

1440×900

1280×800

1024×768

iPhone X

iPhone 7

iPad – chế độ xem dọc

iPad – chế độ xem ngang

Vì vậy, như bạn có thể thấy có nhiều biến thể khác nhau của trang web được hiển thị ở trên và mỗi biến thể trông hơi khác so với biến thể khác.

Cạc đồ họa và màn hình thay đổi cách hiển thị trang web như thế nào?

Cái này khó hiển thị trực tuyến hơn một chút vì cách bạn đang xem trang web này, loại màn hình, cạc đồ họa của máy tính của bạn, v.v. sẽ thay đổi một chút giao diện của trang và cách hiển thị màu sắc.

Màu sắc
Đầu tiên, chúng ta hãy xem xét một thứ có vẻ đơn giản. Số lượng màu mà màn hình của bạn có thể hiển thị. Nếu không thực sự hiểu rõ về kỹ thuật, hầu hết các màn hình sử dụng chung sẽ hiển thị 16.777.216 màu. Có những hệ thống sẽ hiển thị nhiều hơn và các màn hình khác sẽ hiển thị ít hơn mức này để giúp tăng tốc độ chuyển đổi, v.v., nhưng trung bình hầu hết mọi người chạy PC hoặc máy tính xách tay sẽ chạy hệ thống 8-bit hiển thị trung bình 16.777.216 màu.

Xem Thêm  Facebook đang sử dụng dữ liệu lớn như thế nào [Đã cập nhật] - facebook sử dụng dữ liệu của bạn như thế nào

Ngoại lệ ở đây là màn hình retina của Macbook Pro có thể hiển thị hàng tỷ màu với màn hình LED-backlit với công nghệ IPS, vì vậy hiển thị cùng một trang web trên máy tính xách tay đa năng chạy windows và Macbook Pro sẽ cho bạn kết quả màu khác nhau .

Loại màn hình
Nhiều người trong chúng ta hiện đang sử dụng màn hình LCD hoặc LED màn hình phẳng, nhưng vẫn có những khách hàng sử dụng màn hình CRT. Mỗi loại màn hình hiển thị màu sắc theo những cách khác nhau nên sẽ có sự khác biệt giữa các màn hình khác nhau (ngay cả khi chúng được cắm vào cùng một máy tính).

Cài đặt màn hình
Nhiều người trong chúng ta, khi thiết lập máy tính chỉ cần cắm vào màn hình và bắt đầu duyệt web mà không cần xem xét màu sắc, độ sáng, độ tương phản, v.v. Tất cả các cài đặt này đều có thể có tác động mạnh mẽ đến màu sắc mà bạn nhìn thấy trên màn hình.

Cạc đồ họa
Khi nói đến màu sắc, hãy nghĩ đến cạc đồ họa trong máy tính của bạn giống như động cơ trên ô tô của bạn. Nếu bạn có một động cơ tăng áp V8, bạn sẽ có công suất tốt hơn một động cơ bốn xi lanh nhỏ. Điều tương tự cũng có thể nói về cạc đồ họa của bạn – card đồ họa càng tốt thì bạn càng có thể hiển thị nhiều màu sắc và hiển thị chúng càng nhanh, mang đến cho bạn màu sắc sắc nét, rõ ràng.

Dây kết nối màn hình
Hy vọng rằng hầu hết chúng ta đang sử dụng cáp HDMI nếu chúng ta đang kết nối với màn hình bên ngoài ngày nay. Tuy nhiên, tôi vẫn thấy cáp VGA kỳ lạ trôi nổi khắp các văn phòng khác nhau mà tôi đã từng họp. sự khác biệt chính là HDMI là tín hiệu kỹ thuật số và VGA là tín hiệu tương tự cho bạn một số kết quả rất khác nhau khi hiển thị màu.

Trình duyệt web ảnh hưởng như thế nào đến giao diện trang web của bạn

Đối với bài viết này, chúng tôi sẽ đề cập đến các trình duyệt phổ biến nhất và sự khác biệt của chúng, vì vậy chúng tôi sẽ xem xét Google Chrome , Safari , Firefox Microsoft Cạnh .

Tôi đang loại bỏ trình duyệt bị ghét nhất trên web – Internet Explorer . Nếu bạn vẫn đang sử dụng trình duyệt này, hãy tạo điều kiện cho bản thân và máy tính của bạn và nhấp vào một trong các liên kết ở trên và tải xuống trình duyệt hiện đại. Hãy tiếp tục, chúng tôi sẽ đợi.

Ngày nay, các trang web được xây dựng theo nhiều cách khác nhau bằng cách sử dụng nhiều loại công nghệ web khác nhau. Javascript, CSS Jquery, SCSS, v.v. đều có thể được thêm vào các bản dựng trang web. Cách một trình duyệt giải quyết những vấn đề này sẽ phụ thuộc vào cách nó được xây dựng. Hãy cùng xem xét một số điểm khác biệt giữa các trình duyệt.

Công cụ kết xuất

  • Chrome – Nháy mắt
  • Safari – Webkit
  • Firefox – Gecko
  • Microsoft Edge – EdgeHTML

Công cụ kết xuất là công cụ biên dịch tất cả mã của trang web của bạn và tìm ra cách hiển thị nó. Trang web không chỉ là một phần tử – nó được tạo thành từ nhiều tệp, phần tử, lệnh, mã và ngôn ngữ mã hóa khác nhau. Mỗi trình duyệt được liệt kê ở trên sử dụng một công cụ kết xuất khác nhau và tất cả chúng đều khác nhau một chút về cách biên dịch mọi thứ trong trình duyệt.

Xem Thêm  5 cách tốt nhất để đạt được lực kéo trên Instagram - làm thế nào để đạt được nhiều sức hút hơn trên instagram

Với tư cách là nhà phát triển web, bạn hoàn toàn được nhúng vào thế giới Mac / IOS, thì rất có thể bạn sẽ làm quen với Webkit và bạn có thể xây dựng các trang web của mình để được tối ưu hóa cho việc này. Tuy nhiên, bạn nên biết về các công nghệ khác nhau và chúng có thể khác nhau về cách hiển thị trang web.

Ví dụ, hãy truy cập https://webkit.org/ trên Chrome, Firefox, Safari và Edge (kết hợp cả hai hoặc tất cả chúng nếu có thể) và bạn sẽ thấy trang web này hiển thị hơi khác trên tất cả các trình duyệt này (có sự khác biệt nhỏ về màu sắc, độ mượt của hoạt ảnh và bố cục).

Công cụ Javascript

  • Chrome – Công cụ JavaScript V8
  • Safari – công cụ LLVM JIT
  • Firefox – Spidermonkey
  • Microsoft Edge – Công cụ Javascript Chakra

Công cụ javascript được sử dụng để diễn giải tất cả các đoạn mã khác nhau mà một trang web ném vào trình duyệt của bạn và biến nó thành một trải nghiệm có thể sử dụng được. Tương tự như cách động cơ ô tô chuyển đổi tất cả các yếu tố khác nhau tạo nên xăng thành năng lượng cho ô tô của bạn, động cơ javascript biến tất cả các yếu tố khác nhau thành trải nghiệm duyệt web có thể sử dụng được.

Bạn cũng có thể coi nó giống như một trình thông dịch – trang web của bạn là một ngôn ngữ khác, công cụ javascript là người trung gian hoặc trình thông dịch để trình duyệt của bạn có thể ‘hiểu’ ngôn ngữ của trang web.

Hỗ trợ kiểu tệp
Khi chúng ta nói về hỗ trợ kiểu tệp, chúng ta đang nói về các loại tệp khác nhau mà trình duyệt có thể hiển thị hoặc hiển thị. Đây có thể là tệp hình ảnh, tệp video, tệp âm thanh hoặc các tệp khác (chẳng hạn như flash, .php, .asp HMTL5 hoặc CSS3). Mỗi trình duyệt có hỗ trợ loại tệp hơi khác nhau, do đó, tính năng tương tác tuyệt vời trên trang web có thể chỉ hoạt động trên một số trình duyệt hoặc tuyệt vời trên máy tính để bàn nhưng không hoạt động trên thiết bị di động.

Hiển thị Phông chữ
Phông chữ không thực sự được trình duyệt của bạn hiển thị. Chúng được hiển thị bởi hệ điều hành của bạn. Lưu ý điều này sẽ có sự khác biệt nhỏ về kerning (khoảng cách giữa các chữ cái) và độ đậm của chữ cái (độ dày của các chữ cái) giữa hệ điều hành Mac và Windows.

Có nhiều thứ hơn cho một trang web ngoài hình ảnh và văn bản

Như bạn có thể thấy, việc xây dựng một trang web còn nhiều thứ hơn là chỉ tập hợp các hình ảnh và văn bản lại với nhau. Có rất nhiều hệ thống, ngôn ngữ và sự khác biệt trong các trình duyệt và công cụ, tất cả đều góp phần vào những thay đổi nhỏ mà bạn có thể thấy trên các trình duyệt và hệ điều hành.

Vì vậy, vào lần tiếp theo khi bạn xem trang web của mình trên một số trình duyệt hoặc máy tính khác nhau và bạn thấy bố cục, màu sắc hoặc chức năng khác nhau, điều này có thể giúp bạn hiểu tại sao lại như vậy.

Xem Thêm  10 lời thề danh dự của quân nhân mới nhất 2022 - nội dung 10 lời thề danh dự của quân nhân


Xem thêm những thông tin liên quan đến chủ đề tại sao các trang web trông khác nhau trên các trình duyệt khác nhau

Các mẹo hay khi sử dụng trình duyệt web Google Chrome

  • Tác giả: Mr.Tâm vi tính
  • Ngày đăng: 2021-12-13
  • Đánh giá: 4 ⭐ ( 8676 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mua hàng Shopee từ gian hàng của Mr Tâm vi tính
    Ghé shop: https://shp.ee/r38rurd
    ============================
    Clip hướng dẫn/giới thiệu các mẹo nhỏ hay khi dùng trình duyệt web Google Chrome như sau:
    1/ Tạo biểu tượng (icon) đường dẫn (shortcut) của 1 trang web/link yêu thích ở ngoài màn hình desktop.
    2/Tính năng lưu thanh dấu trang (bookmarks) các trang web/link yêu thích để tiện dùng mở nhanh cho những lần sau. Sao lưu và phục hồi thanh dấu trang.
    3/Thiết đặt lại thư mục tải file (download) mặc định của Google Chrome tránh mất dữ liệu. Bật (enable) tính năng tải file đa luồng (parallel downloading) trong Google Chrome giúp tải file nhanh siêu tốc.
    4/Cài đặt tiện ích Google Dịch giúp dịch tiếng Anh sang tiếng Việt nhanh gọn trực tiếp ngay trên trang web tiếng Anh.
    Hy vọng video này hữu ích.
    Cảm ơn các bạn đã xem video.
    Hãy chia sẽ video này với những người khác có cùng sở thích.

Hướng dẫn Chrome Portable tạo nhiều trình duyệt Chrome khác nhau

  • Tác giả: netweb.vn
  • Đánh giá: 3 ⭐ ( 2453 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cập nhập: 15/10/2021 – Google Chrome Portable là phiên bản gọn nhẹ của Google Chrome Trong khi bản Chrome gốc sẽ cần bạn phải cài đặt

Tại sao nhiều trang web trông giống nhau? Và làm thế nào để đảm bảo rằng của bạn là duy nhất.

  • Tác giả: bestprint.vn
  • Đánh giá: 4 ⭐ ( 4524 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nói một cách chủ quan, bạn có thể nói rằng rất nhiều trang web ngày nay là những biến thể của cùng một thứ. Tại sao vậy? Và nó là một điều tốt hay xấu? Hãy

Top 10 trình duyệt web cho android tốt nhất 2022

  • Tác giả: www.thegioididong.com
  • Đánh giá: 4 ⭐ ( 1921 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Danh sách 10 trình duyệt web được đánh giá là tốt và tối ưu nhất cho điện thoại hệ điều hành Android. Click xem và tải về ngay!

Trang web là gì? Trang web động, web tĩnh khác nhau như thế nào?

  • Tác giả: blog.webico.vn
  • Đánh giá: 3 ⭐ ( 5943 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trang web là gì? Trang web là gì? Trang web, có thể hiểu là một tập hợp các trang web con với các nội dung vô cùng đa dạng từ văn bản, hình ảnh, video, flash, landing page… Trang web được truy cập và nằm trong một tên miền chính hoặc các tên miền phụ. Trang […]

Tìm hiểu các trình duyệt web phổ biến nhất hiện nay tại Việt Nam

  • Tác giả: fptshop.com.vn
  • Đánh giá: 4 ⭐ ( 6463 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trình duyệt web trên điện thoại và máy tính vô cùng đa dạng và có những sự khác biệt nhất định. Cùng tìm hiểu trình duyệt web là gì và các trình duyệt web phổ biến nhất hiện nay tại Việt Nam qua nội dung bài viết này.

Cách kiểm tra trang web WordPress trong các trình duyệt khác nhau (Cách dễ dàng)

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 7351 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có muốn tìm hiểu cách kiểm tra một trang WordPress trên các trình duyệt khác nhau không?Kiểm tra trình duyệt chéo là điều cần thiết khi chuyển đổi chủ đề

Xem thêm các bài viết khác thuộc chuyên mục: Social