hiển thị web trên mobile device

**trang102** · 03-07-2012 16:11

Các pác vui lòng chỉ giúp em cách hiển thị web trên các device khác nhau:

Sau khi em layout xong web (dùng cho pc), khi muốn hiển thị trên mobile device thì mình phải

code css như thế nào, hj.

**hanhtinhla92** · 04-07-2012 14:59

Nếu bạn chỉ cần viết lại css, giữ layout cho trang trên mobile thì bạn thêm file "handheld.css" và code css cho mobile ở trong file đó. Sau đó đặt thêm dòng

<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />

vào trong <head></head> để web xác định trình duyệt đó là pc hay mobile, nếu là mobile thì nó sẽ nhận css ở file handheld.css kia, còn không thì sẽ ở các file css dành cho pc

Còn nếu thay cả layout thì bạn phải có dòng lệnh xét trình duyệt đang truy cập là dành cho pc hay mobile để chuyển hướng link đến trang dành cho pc hay mobile.
Trường hợp này thì mình làm thêm 1 subdomain dành cho mobile
Còn pro nào có cách khác thì cho ý kiến

**chieugtvt** · 04-07-2012 19:57

Mấy hôm nay mình cũng đang cắt 1 layout cho mobile
mình sử dụng Media Queries trong css3 này để kiểm tra kích thước màn hình khác nhau trong file css
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

hoặc có thể đặt file riêng rồi kiểm tra lúc include file css
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

có bạn nào biết cái này thêm vào header nó dùng làm gì không
<meta name="viewport" content="width=device-width" />

**zlatan_pham** · 04-07-2012 21:28

Code <meta name="viewport" content="width=device-width" /> thêm vào head để trang web hiển thị đúng như media queries trên thiết bị di động.

**webvina** · 07-07-2012 14:37

Hãy tìm hiểu khái niệm về "responsive web design" nhé bạn

https://www.google.com.vn/search?q=r...w=1366&bih=618

Chủ đề: hiển thị web trên mobile device

Hỗ trợ

Rate This Thread

Help hiển thị web trên mobile device

2 thành viên Like bài viết này:

Bookmarks

Bookmarks

Quy định