Làm cách nào để thay đổi CSS dựa trên thiết bị di động?

Trong ví dụ sau, tôi muốn hiển thị chỉ một div, tùy thuộc vào thiết bị.Làm cách nào để thay đổi CSS dựa trên thiết bị di động?

Tôi quen với cách sử dụng @media để ghi đè lên lớp CSS nhưng không phải cách thực hiện điều kiện.

<style type="text/css"> 
    @media (max-width : 770px) { 
    ... 
    } 

    @media (max-width : 320px) { 
    ... 
    } 
    //do I need another for the desktop? 
</style> 

//if desktop 
<div style="width: 400px; float: left;"> 
    this is desktop 
    <a href="somepage.html"><img src="aLargeImage.png"/></a> 
</div> 

//if mobile 
<div style="width: 200px; float: left;"> 
    this is mobile 
    <a href="somepage.html">just text</a> 
</div>

Mọi đề xuất?

Nguồn

2013-04-22 4thSpace

Tôi hơi bối rối ở đây nhưng tất cả những gì bạn muốn là hiển thị các phần tử div khác nhau tùy thuộc vào kích thước màn hình mà người dùng truy cập đang bật? – Hoshts

Nội dung có bị ẩn hay không, người dùng sẽ vẫn tải xuống nội dung đó. Rất nhiều người trả tiền cho KB trong kế hoạch di động của họ trong những ngày này. – cimmanon

Không nhiều. Rất nhiều kế hoạch là dữ liệu không giới hạn. Nhưng không thực sự là một cách xung quanh mỗi vấn đề KB. Tôi nghĩ rằng ẩn/hiển thị hai divs là giải pháp. Tôi chỉ cần sử dụng các tên lớp khác nhau. – 4thSpace

Hm tôi nghĩ rằng việc tạo 2 hoặc nhiều tệp css dễ dàng hơn và tải chúng qua javascript dựa trên thiết bị. Tương tự như vậy bên trong hàm onload:

var cssPath = "standard.css"; 
if (navigator.platform == "iPad") 
    cssPath = "iPad.css"; 

var fileref = document.createElement("link"); 

fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", cssPath); 

document.getElementsByTagName("head")[0].appendChild(fileref);

Tệp css ngắn hơn và dễ đọc hơn dễ trao đổi.

Nguồn

2013-04-22 20:41:03 OliverK

I muốn tránh javascript. – 4thSpace

Dưới đây là một ví dụ về cách nó có thể được thực hiện có điều kiện mà không cần javascript:

//CSS 
.visibledevice {display:none;} 
.visibledesktop {display:display;} 

@media (max-width : 320px) { 
.visibledevice {display:block;} 
.visibledesktop {display:none;} 


//in the page 
<div class="visibledesktop">this displays for desktop</div> 

<div class="visibledevice">this displays for mobile</div>

Nguồn

2013-04-22 23:18:29 4thSpace

Và cách bạn xác định lớp div ở vị trí đầu tiên? là hai div sẽ được hiển thị trong HTML cho dù thiết bị là gì.! trong trường hợp này, chúng tôi sẽ hiển thị hai div có cùng nội dung trên trang. từ khía cạnh SEO tôi không nghĩ rằng nó tốt ý tưởng KW mật độ sẽ được tăng gấp đôi. cuối cùng tôi đã bỏ phiếu vì giải pháp vẫn tốt hơn các giải pháp Js –

cách có thể thực hiện với chiều rộng cụ thể? – fdrv

@fdrv không thể trừ khi bạn sử dụng tác nhân người dùng. – User

thế nào để làm một truy vấn css phương tiện truyền thông conditionnal:

@media only screen and (width : 1024px) and (orientation : landscape) {  
    .selector1 { width:960px; } 
}

Nguồn

2013-09-24 00:09:28

Tôi biết rằng đây là một chủ đề cũ nhưng tôi đã tìm ra một lựa chọn tốt hơn .. cho tôi ít nhất

<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=1"> 
<?php 
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) 
{ echo '<link type="text/css" rel="stylesheet" media="all" href="/styles/mobile.css">'; 
} 
else{ 
echo '<link type="text/css" rel="stylesheet" media="all" href="/styles/desktop.css">'; 
}; 
?>

Nguồn

2014-06-19 20:48:10 ihateclownz

Tôi nhận được cảnh báo: 'Chú ý: Biến không xác định: useragent trong [...] line [...]' sử dụng mã của bạn. Tôi đoán là '$ useragent' ở cuối dòng. Bạn có thể phát nổ không? – uomopalese

Làm cách nào để thay đổi CSS dựa trên thiết bị di động?

Trả lời

Các vấn đề liên quan