Màn hình và Biểu định kiểu Di động

Tôi đã xem qua các chủ đề tràn ngăn xếp trên câu hỏi này, cũng như một số kết quả tìm kiếm trên google nhưng dường như tôi không thể giải quyết được vấn đề của mình.Màn hình và Biểu định kiểu Di động

Tôi đã tạo biểu định kiểu cho thiết bị di động (mobile.css) bản chất là bản sao các tệp main.cs của tôi với các thay đổi đối với nhiều thuộc tính. Khi tôi chỉ tải mobile.css làm biểu định kiểu, nó trông tuyệt vời trên iPhone của tôi, giống như cách tôi muốn nó. Tuy nhiên, khi tôi đặt cả hai vào, tôi đang nhận được một kết hợp của cả hai, nhưng nhiều hơn của main.css

Bất kỳ ý tưởng tại sao?

<head> 
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" /> 
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
</head>

Nguồn

2011-09-20 xIlluzionx

Làm thế nào để bạn "đặt cả hai trong"? – Blender

Mã của tôi không hiển thị vì một số lý do khi tôi đăng nó ... Bạn có thể xem mã nguồn tại: www.cuhvz.com/sandbox/home.php – xIlluzionx

Đã sửa lỗi không. Nó sẽ hoạt động ngay bây giờ. – Blender

Theo documents, cú pháp của tải một tập tin trong thiết bị cụ thể/điều kiện là như thế này:

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

Điều này sẽ chỉ tải một tệp css cho mỗi số tiền width

Đối với iPhone 4 và iPod touch thế hệ mới có màn hình Retina, có điều gì đó bạn cần lưu ý. Chiều rộng iPhone 4 là 640 pixel mà nhiều nhà phát triển không tính chiều rộng này dưới dạng chiều rộng trình duyệt di động. Nếu bạn thêm thẻ meta bên dưới này vào vấn đề tài liệu của mình sẽ được giải quyết

<meta name="viewport" content="width=320">

Thẻ meta này sẽ ảnh hưởng đến chất lượng hình ảnh của bạn. Nếu bạn muốn khắc phục vấn đề đó thì bạn cần phải đọc về điều này here.

Nguồn

2011-09-20 04:00:33 Mohsen

Xin lỗi, không có đánh dấu nào được đăng vì lý do nào đó, có lẽ tôi quên định dạng nó thành mã. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

Bạn cần thêm màn hình 'media =" và (min-width: 480px) "' vào 'main.css' – Mohsen

Làm điều đầu tiên bạn nói là đã làm việc! – xIlluzionx

của nó khó có thể biết mà không bất kỳ đánh dấu nhưng tôi đoán bạn nên làm một cái gì đó như:
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

<link rel="stylesheet" href="base.css" /> // has all the common classes 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" /> 
<link rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />

Nguồn

2011-09-20 03:59:42

Xin lỗi, không có đánh dấu nào được đăng vì lý do nào đó, có lẽ tôi quên định dạng nó thành mã. (www.cuhvz.com/sandbox/home.php) – xIlluzionx

@scott; có thể bạn phải xác định mobile.css của bạn sau khi main.css như thế này:

<link rel="stylesheet" href="main.css" media="screen" /> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />

hoặc bạn có thể xác định bạn mobile css trong bạn main.css như thế này:

@media screen and (max-device-width: 480px){ 
    body { 
    background: #ccc; 
    } 
}

EDIT:

ghi <!DOCTYPE html> này thay vì <DOCTYPE html> trong html của bạn.

Nguồn

2011-09-20 04:01:55 sandeep

kiểu điện thoại di động của bạn được nạp có điều kiện, có nghĩa là máy tính sẽ tải chỉ các main.css, trong khi iPhone sẽ được tải cảmain.css và mobile.css.

Nếu bạn muốn bắt đầu từ đầu khi bạn tải trang trên iPhone, chỉ cần thêm đoạn này của CSS lên đỉnh mobile.css của bạn:

/* 
YUI 3.4.0 (build 3928) 
Copyright 2011 Yahoo! Inc. All rights reserved. 
Licensed under the BSD License. 
http://yuilibrary.com/license/ 
*/ 
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

Nó có hiệu quả reset CSS.

Nguồn

2011-09-20 04:18:55 Blender

Màn hình và Biểu định kiểu Di động

Trả lời

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