HTML5 Boilerplate: Meta viewport và width = device-width

Question

Tôi đang xây dựng trang web thích ứng/đáp ứng.

Về thay đổi gần đây này đến HTML5BP:

"mobile/iOS css revisions"

Tôi đã bắt đầu sử dụng:

<meta name="viewport" content="width=device-width"> 

... và tôi có điều này trong CSS của tôi:

html { 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
} 

Khi bao gồm initial-scale=1, xoay từ theo chiều dọc al to horizontal (trên iPad/iPhone) khiến bố cục thay đổi từ 2 cột (ví dụ) thành 3 cột (do truy vấn meida, initial-scale=1 và JS fix for viewport scale bug).

Để tóm tắt, khi ở chế độ nằm ngang, điều này phóng trang:

<meta name="viewport" content="width=device-width"> 

... và điều này không:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Lưu ý: Bạn có thể thấy điều này hiệu ứng phóng to đang hoạt động khi xem HTML5BP website trên iPad/iPhone.

Câu hỏi của tôi:

1. Đây có phải là trở thành tiêu chuẩn mới (ví dụ: zoom khi ở chế độ nằm ngang)?
2. Tôi đang có một thời gian để giải thích sự thay đổi này cho đồng nghiệp và ông chủ của tôi ... Họ thường thấy một bố cục khác ở chế độ nằm ngang; bây giờ thu phóng trang và bố cục vẫn giữ nguyên (ngoại trừ nó lớn hơn). Bất kỳ lời khuyên nào về cách giải thích điều này với khối lượng không biết gì (trong đó, tôi có thể được đưa vào)?

---

@robertc: Cảm ơn! Điều đó rất hữu ích.

Tôi thực sự thích không phải có số initial-scale=1; đó là đồng nghiệp của tôi, những người quen với việc thay đổi bố cục thay vì thu phóng. Tôi chắc chắn tôi sẽ được buộc để thêm initial-scale=1 chỉ để làm hài lòng mọi người (vì không phải là phóng to và thấy thay đổi bố cục, là những gì họ thường thấy).

Tôi vừa nhận thấy HTML5BP index.html on github và the website, đang sử dụng <meta name="viewport" content="width=device-width">; với tôi, đó là lý do đủ tốt để mương initial-scale=1, nhưng tôi nhận được nhướn lông mày khi tôi cố gắng giải thích these things cho "không chuyên viên máy tính". : D

Answer 1

Đây không phải là tiêu chuẩn mới, đó là cách nó luôn hoạt động AFAIK. Nếu bạn đặt chiều rộng thành số pixel cố định, thì xoay dọc theo chiều ngang chỉ thay đổi tỷ lệ vì số lượng pixel ảo vẫn không đổi. Tôi đoán rằng việc thêm initial-scale=1 đang chặn chia tỷ lệ khi bạn chuyển đổi giữa - đó là hệ số nhân rộng của trang của bạn không thay đổi khi xoay thiết bị.Trang trông như thế nào nếu bạn tải trang ban đầu ở chế độ ngang thay vì dọc?

Tôi sẽ đề xuất rằng nếu bạn muốn hành vi bạn nhận được khi bạn chỉ định initial-scale=1, sau đó chỉ định initial-scale=1. HTML5 BoilerPlate là thứ mà bạn đang coi là để sửa đổi cho phù hợp với yêu cầu của riêng bạn.

Answer 2

Apple [phần nào] mô tả rõ ràng hành vi của chế độ xem here.

Chủ yếu, chiều rộng thiết bị và chiều cao thiết bị trong thiết bị iOS tham chiếu đến kích thước màn hình ở chế độ dọc. Nếu bạn đặt chiều rộng khung nhìn thành chiều rộng của thiết bị, nó giống như đặt giá trị không đổi giá trị không đổi. Do đó, khi chiều rộng vật lý của màn hình thay đổi theo một thay đổi khía cạnh, trình duyệt sẽ kéo dài kích thước hằng số mà bạn đã nhập vào chiều rộng của màn hình ở chế độ nằm ngang. Hành vi này không phải là sai và cũng không đúng, nó chỉ là.

của Apple cho thấy width=device-width cho các ứng dụng phù hợp với nền tảng này, vì vậy nó chắc chắn là "Apple" cách để làm việc đó:

Nếu bạn đang thiết kế một ứng dụng web đặc biệt dành cho iOS, thì kích thước đề nghị cho các trang web của bạn là kích thước của khu vực hiển thị trên iOS. Apple khuyên bạn nên đặt chiều rộng thành chiều rộng của thiết bị sao cho tỷ lệ là 1,0 theo hướng dọc và chế độ xem không phải là thay đổi kích thước khi người dùng thay đổi hướng ngang. [ví dụ: Chế độ xem giữ nguyên chiều rộng của thiết bị dọc, nhưng được thu nhỏ hoặc kéo dài để hiển thị cho vừa với chiều rộng ngang]

Cá nhân, tôi thích quy mô ban đầu = 1.0 không có thiết lập chiều rộng thiết bị tuyệt đối vì nó làm cho chế độ xem luôn luôn điền vào màn hình thiết bị mà không cần kéo dài. Apple cũng xem xét việc đánh dấu hợp lệ này:

Hình 3-14 hiển thị cùng một trang web khi quy mô ban đầu được đặt thành 1.0 trên iPhone. Safari trên iOS có chiều rộng và chiều cao để vừa với trang web trong khu vực hiển thị. Chiều rộng khung nhìn được đặt thành chiều rộng thiết bị theo hướng dọc và chiều cao thiết bị theo hướng ngang.

Answer 3

Tôi tìm thấy Mozilla's viewport explanation chi tiết và hữu ích nhất. Dưới đây là một đoạn trích:

Thuộc tính chiều rộng kiểm soát kích thước của chế độ xem. Nó có thể được đặt thành một số lượng pixel cụ thể như width=600 hoặc giá trị chiều rộng thiết bị có giá trị đặc biệt là chiều rộng của màn hình trong CSS pixel ở tỷ lệ 100%. (Có tương ứng height và device-height giá trị, có thể hữu ích cho các trang với các yếu tố làm thay đổi kích thước hoặc vị trí dựa trên chiều cao khung nhìn.)

Thuộc tính initial-scale kiểm soát mức độ phóng khi trang được đầu tiên nạp. Các maximum-scale, minimum-scale, và user-scalable tính kiểm soát cách người dùng được phép phóng to trang vào hoặc ra

Answer 4

Để thêm một chút update: này vẫn chỉ là dự thảo, nhưng nó chắc chắn là một cái gì đó để xem xét. Cũng có một phiên bản tiền tố cho hỗ trợ IE 10.Bằng cách sử dụng CSS thay vì HTML trời quang đãng lên rất nhiều sự nhầm lẫn bạn đang nói trên bằng cách áp dụng initial-scale:1;-zoom:1; và đem lại cho min/max tùy chọn cho width, height, & zoom mà furter làm tăng phạm vi điều chỉnh nó nên được yêu cầu.

extend-to-zoom để giải cứu! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)

<meta name="viewport" content="initial-scale=1.0"> dịch sang & hellip;

@viewport{ 
    zoom: 1.0; 
    width: extend-to-zoom; 
} 
@-ms-viewport{ 
    width: extend-to-zoom; 
    zoom: 1.0; 
} 

nơi như <meta name="viewport" content="width:device-width,initial-scale=1.0"> dịch sang & hellip;

@viewport{ 
    zoom: 1.0; 
    width: device-width; /* = 100vw */ 
} 
@-ms-viewport{ 
    width: device-width; 
    zoom: 1.0; 
} 

Lưu ý: width:extend-to-zoom 100%; bằng width:device-width;

http://dev.w3.org/csswg/css-device-adapt/

Answer 5

bạn đã thử loại này?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">