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

Hà Phạm 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

Hà Phạm

25 bài viết.
67 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
43 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...
Hà Phạm viết hơn 3 năm trước
43 8
White
32 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...
Hà Phạm viết hơn 3 năm trước
32 3
White
16 1
Tiếp tục loạt bài về promise, như tôi đã hứa ở cuối (Link). Hả? Không, còn mỗi bài này nữa thôi, tôi thề. Bài trước chúng ta đã xem xét tác vụ khô...
Hà Phạm viết hơn 3 năm trước
16 1
Bài viết liên quan
White
52 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết 3 năm trước
52 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
25 bài viết.
67 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á!