Trick nhỏ để lấy screen size với javascript và css
CSS3
24
Javascript
200
Web
23
White

Hoàng Duy viết ngày 18/12/2017

Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley:

Lấy screen size ở đây tôi muốn nói với việc phát hiện xem màn hình browser có kích thước vừa hay to nhỏ thế nào. Cái này quá đơn giản, có gì mà phải trick, bạn có thể gọi ngay window.innerWidth rồi so sánh với các mức định trước là ra liền chứ gì.

Hừm, vấn đề ở đây là các hàm hay thuộc tính đó trả về kết quả là pixel (px). Mà cái này lại phụ thuộc độ phân giải, màn hình nhỏ nhưng độ phân giải rất to (retina chẳng hạn) thì có rất nhiều pixel. Do vậy không thể đếm pixel mà biết người dùng đang dùng màn hình to hay bé được.

Hiện nay, với sự lên ngôi thiết kế đáp ứng (responsive) hay thiết kế tương thích (adaptive design), đơn vị được ưa chuộng là em. Nếu ai có thắc mắc thì mình giải thích ngắn gọn 1 em = bề rộng của một ký tự. Như vậy, nếu màn hình của tôi hiển thị 1 ký tự mất 10 pixel theo chiều ngang thì '1 em của tôi' bằng 10px, còn màn hình của bạn retina 1 ký tự rộng 20 pixel thì '1 em của bạn' = 20px. Dùng em để đánh giá độ rộng màn hình rất là tiện lợi, người dùng sẽ điều chỉnh zoom ra zoom vào đến khi nào đọc được chữ thì thôi, thế nên màn hình mà chiều ngang hiện được càng nhiều chữ thì càng to.

Đếm em

Vậy đếm em thế nào, thật may mắn css có "media query" để chúng ta style phần tử dựa vào kích thước màn hình, và chúng hỗ trợ em

body::before {
  display: none;
  content: "small";
}

@media only screen and (min-width: 54em) {
  body::before {
    content: "medium"; 
  } 
}

@media only screen and (min-width: 84em) {
  body::before {
    content: "large"; 
  } 
}

He he, cách hack ở đây là style cho phần tử ảo body::before và thay đổi content dựa trên độ rộng màn hình. Bây giờ để lấy size chỉ cần đọc thuộc tính content của nó.

function getSize() {
  return window.getComputedStyle(document.body, '::before')
    .getPropertyValue('content')
    .replace(/["']/g, '');
}

Chú ý ở đây getPropertyValue('content') sẽ trả về nguyên cả chuỗi "large" gồm cả dấu nháy nên phải trim nó đi.

Rất đơn giản phải không nào.


This post appeared first on my blog and cross-posted on kipalog.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Duy

24 bài viết.
54 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
39 8
Xin chào, đây là lần đầu tiên mình post bài ở đây. Nhiều vấn đề mình cũng không rành lắm, có gì sai mọi người góp ý nhé. Xin cảm ơn :D Bài này gi...
Hoàng Duy viết gần 3 năm trước
39 8
White
30 3
Đây là một trong các concept mới đối tượng mới được đưa vào ECMAScript 6. Việc sử dụng chúng rất dễ nhưng để hiểu được thì (đối với tôi) cũng cần k...
Hoàng Duy viết hơn 2 năm trước
30 3
White
15 4
Đây là loạt bài viết ghi lại những thứ tôi hiểu về AngularJS. Xin lưu ý rằng loạt bài này không phải là hướng dẫn cho người mới bắt đầu, tuy nhiên ...
Hoàng Duy viết hơn 2 năm trước
15 4
Bài viết liên quan
White
12 2
Trong loạt bài Trở lại cơ bản này mình xin trình bày lại các khái niệm cơ bản về tất cả mọi thứ mình đã từng được học bằng ngôn ngữ đơn giản nhất c...
Hoàng Duy viết hơn 1 năm trước
12 2
White
21 10
Bài này mình dịch từ bài viết sau : http://kakubei.blogspot.com/2012/05/whyihaterails.html Bản thân mình cũng đang sử dụng Rails trong công việc, ...
Duy Anh viết hơn 2 năm trước
21 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
54 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!