Lưu ý: Hướng dẫn này được xuất bản lần đầu vào tháng Hai năm 2012, nhưng nó thường được sử dụng như một tài liệu tham khảo trong hướng dẫn khác (và mọi thứ đã thay đổi) vì vậy thiet ke website tai da nang cảm thấy nó bảo hành một bản cập nhật.
các Crux
Nếu bạn đọc không có gì khác trong phạm vi bài viết này, có một chút tư vấn vị: nếu bạn đang thiết kế linh hoạt, sử dụng các thẻ meta trong khung nhìn của bạn <head>. Trong hình thức cơ bản của nó, nó sẽ đặt bạn lên cho cross-thiết bị bố trí yên tâm:
<meta name = "khung nhìn" content = "ban đầu quy mô = 1">
vấn đề
Hãy sử dụng một bố trí ví dụ tôi đã đánh nhau. Hãy xem; bạn sẽ thấy nó co lại và phát triển như bạn thay đổi kích thước của trình duyệt của bạn. Có còn là một phương tiện truyền thông truy vấn duy nhất mà làm cho văn bản lớn hơn và cung cấp cho các nhóm một màu # ff333e sáng trên màn hình rộng hơn. Đáng yêu.
Đây là cách có vẻ trong OSX Chrome:
Và đây là cách nó xuất hiện khi cửa sổ trình duyệt được squished:
Bây giờ chúng ta hãy xem làm thế nào mà trông vào một điện thoại thông minh (trong trường hợp này iOS Safari trên iPhone 4):
Điều đầu tiên bạn sẽ nhận thấy là tiêu đề màu đỏ; một giveaway chết mà chúng ta không nhìn vào cách bố trí hẹp mà chúng ta mong đợi. Thiết kế website ở Đà Nẵng đang thực sự tìm kiếm một phiên bản thu nhỏ ra.
iOS Safari giả định một trang web là 980px rộng, thu nhỏ để phù hợp với toàn bộ rất nhiều trong có sẵn (iPhone 4) 320px. Nội dung là sau đó ít hơn nhiều có thể đọc được, trừ khi bạn phóng to.
Tại sao?
Khi họ nói, giả định là mẹ của tất cả ... một cái gì đó nhưng đó là chính xác những gì các trình duyệt di động phải làm gì nếu bạn không hướng dẫn cụ thể cho họ. Khi bạn truy cập một trang web thông qua trình duyệt di động của nó sẽ cho rằng bạn đang xem một trải nghiệm máy tính để bàn lớn và bạn muốn xem tất cả của nó, không chỉ góc trên bên trái. Do đó, sẽ thiết lập chiều rộng khung nhìn tại (trong trường hợp của iOS Safari) 980px, giày horning tất cả mọi thứ vào màn hình nhỏ của nó.
Viewport Meta Tag
Nhập thẻ meta khung nhìn, được giới thiệu bởi Apple, sau đó thông qua và tiếp tục phát triển bởi những người khác.
Nó trông như thế này:
1
<meta name = "khung nhìn" content = "">
Trong nội dung = "" bạn có thể nhập một tải trọng của dấu phẩy phân cách giá trị, nhưng chúng ta sẽ tập trung vào những cái cơ bản cho bây giờ.
Ví dụ, nếu thiết kế điện thoại di động của bạn là cố ý đặt ra tại 320px bạn có thể xác định chiều rộng khung nhìn:
1
<meta name = "khung nhìn" content = "width = 320">
Bố trí linh hoạt đó là thực tế hơn để căn chiều rộng khung nhìn của bạn trên thiết bị trong câu hỏi, do đó, để phù hợp với chiều rộng bố trí của bạn với chiều rộng thiết bị bạn hãy nhập vào:
1
<meta name = "khung nhìn" content = "width = chiều rộng thiết bị">
Để có thêm chắc chắn rằng bố trí của bạn sẽ được hiển thị như bạn dự định nó, bạn cũng có thể thiết lập mức độ zoom. Điều này, ví dụ:
1
<meta name = "khung nhìn" content = "ban đầu quy mô = 1">
..will đảm bảo rằng sau khi mở cửa, bố trí của bạn sẽ được hiển thị đúng tỷ lệ 1: 1 quy mô. Không phóng to sẽ được áp dụng. Bạn thậm chí có thể đi xa hơn và ngăn chặn bất kỳ phóng to bởi người sử dụng:
1
<meta name = "khung nhìn" content = "tối đa quy mô = 1">
Lưu ý: Trước khi áp dụng các thông số tối đa quy mô, xem xét xem bạn thực sự cần được ngăn chặn người dùng từ phóng to chúng có thể đọc tất cả mọi thứ cũng như có thể.?
Sử dụng thẻ meta khung nhìn đúng cách có thể gây trở ngại cho người sử dụng có vấn đề về thị giác truy cập vào trang web của bạn
- Dự án tiếp cận
Đặt tất cả lại
Những giá trị này lại với nhau cho chúng ta một mặc định tuyệt vời để làm việc với:
1
<meta name = "khung nhìn" content = "width = chiều rộng thiết bị, ban đầu quy mô = 1">
Chúng ta hãy xem làm thế nào nó ảnh hưởng đến ví dụ của chúng tôi
Như bạn thấy, tất cả mọi thứ vẫn còn ở quy mô chính xác. Văn bản được gói thay vì thu hẹp lại, và trợ giúp thị giác của chúng tôi (tiêu đề màu đỏ) đã biến mất.
Nhưng!
Hat tip để Jason cho trỏ này ra trong các ý kiến. Bằng cách nói rằng chiều rộng của bố trí của bạn bằng với chiều rộng thiết bị, bạn sẽ gặp vấn đề khi một thiết bị được sử dụng trong cảnh quan. Hãy xem làm thế nào một iPhone 4 xử lý demo của chúng tôi, trong cảnh quan:
Trình duyệt cảm thấy có nghĩa vụ phải phóng to, để phù hợp với chiều rộng của trang.
Để làm được việc này, chúng ta có thể, như Jason chỉ ra, sử dụng JavaScript để có điều kiện chọn metatag thuộc tính nào đó, nhưng giải pháp đơn giản có vẻ là chỉ đơn giản là bỏ qua chiều rộng hoàn toàn. Chỉ thiết lập ban đầu quy mô chiều rộng là suy luận. Đây là cách mới, giới thiệu đơn giản hóa của chúng tôi xuất hiện trong cảnh quan:
Không phải là tiêu chuẩn bạn đang tìm kiếm
Các metatag khung nhìn là giải pháp của Apple cho vấn đề. Nó đã được thông qua một cách nhanh chóng bởi các nền tảng khác, nhưng nó không bao giờ được đưa ra bởi W3C. Microsoft đưa ra ánh sáng này khi họ đã chọn cho IE10 để bỏ qua các khung nhìn metatag trong những trường hợp nhất định. Thay vào đó, họ chọn để sử dụng CSS thiết bị thích ứng, đó là những gì W3C đang dựa vào.
Trong ngắn hạn, tài sản tương tự như khung nhìn được định nghĩa trong CSS bằng cách sử dụng quy tắcviewport, thay vì trong HTML.
viewport {
zoom: 1.0;
chiều rộng: chiều rộng thiết bị;
}
Hoặc, phù hợp với phiên bản mới hơn không chỉ định thiết bị cách tiếp cận rộng của chúng tôi, chúng tôi có thể thiết lập như sau:
viewport {
zoom: 1.0;
chiều rộng: mở rộng-to-zoom;
}
Cho rằng đó là một công việc đang tiến, IE10 yêu cầu phiên bản tiền tố của đề nghị, trông một cái gì đó như thế này:
@ -ms-khung nhìn {
chiều rộng: mở rộng-to-zoom;
zoom: 1.0;
}
Đó là một giải pháp rất thanh lịch hơn so với metatag, nhưng là một chặng đường dài từ được hỗ trợ đầy đủ. Khe cắm nó vào CSS của bạn bây giờ, để đảm bảo thiết kế đáp ứng của bạn cư xử chính nó trong IE10 "chế độ chụp", và giữ một mắt về sự tiến bộ của mình trong tương lai. Đây là nơi kiểm soát khung nhìn là đứng đầu.
Bạn có thể đọc thêm về điều này trong bài viết Tim Kadlec của IE10 Snap Mode và Thiết kế Responsive.
kết luận
Thiet ke website đáp ứng không chỉ dành cho những người thích xem trình duyệt của họ phát triển và co lại, nó về phục vụ cho nhiều thiết bị khác nhau, màn hình và độ phân giải càng tốt! Ném thẻ meta vào khung nhìn của bạn <head>, cộng với các quy tắcviewport vào CSS của bạn khi bạn đang xây dựng bố trí linh hoạt và bạn tốt để đi.
Xem thêm: thiet ke web o nha trang
Đăng nhận xét