Đề nghị giải quyết trang web (chiều rộng và chiều cao)? [đóng cửa]


123

Có bất kỳ tiêu chuẩn về độ phân giải trang web phổ biến?

Chúng tôi đang nhắm mục tiêu các màn hình mới hơn, có thể rộng tối thiểu 1280px, nhưng chiều cao có thể khác nhau và mỗi trình duyệt cũng có thể có chiều cao thanh công cụ khác nhau.

Có bất kỳ loại tiêu chuẩn cho điều này?


32
Tại sao điều này được đóng lại là "không mang tính xây dựng"? Có vẻ như một câu hỏi hợp lệ để hỏi, và đặc biệt là câu trả lời được đánh giá cao nhất và được chấp nhận cung cấp thông tin có giá trị.
Damon

20
Tôi đồng ý với Damon. Đây là một câu hỏi hợp lệ và nhiều người muốn nghe câu trả lời. Tôi nghĩ rằng SO đã trở nên quá nhiệt tình trong việc đóng các câu hỏi.
giun web

Tràn ngăn xếp phù hợp hơn với Hỏi & Đáp tuyệt đối, nghĩa là, các công cụ kỹ thuật có câu trả lời cụ thể, không phải là những câu hỏi mà các ý kiến ​​khác nhau có thể hợp lệ hoặc khi câu trả lời đúng phụ thuộc hoàn toàn vào trường hợp / dự án sử dụng ..
Juan

chiều rộng trang web stackoverflow khoảng 1090px.odd!
Necktwi

Câu trả lời:


221

Lời khuyên những ngày này là:

Tối ưu hóa cho 1024x768 . Đối với hầu hết các trang web này sẽ bao gồm hầu hết khách truy cập. Hầu hết các nhật ký cho thấy 92-99% số lượt truy cập của bạn sẽ rộng hơn 1024. Trong khi 1280 ngày càng phổ biến, vẫn còn rất nhiều ở mức 1024 và một số dưới mức đó. Tối ưu hóa cho điều này nhưng đừng bỏ qua những người khác.

1024 = ~ 960 . Kế toán cho thanh cuộn, cạnh cửa sổ, vv có nghĩa là chiều rộng thực của màn hình 1024x768 là khoảng 960 pixel . Một số công cụ dựa trên kích thước nhỏ hơn một chút, khoảng 940 . Đây là chiều rộng vùng chứa mặc định trong bootstrap twitter .

Đừng thiết kế cho một kích thước . Kích thước cửa sổ khác nhau. Đừng cho rằng kích thước màn hình bằng kích thước cửa sổ. Thiết kế cho tối thiểu hợp lý, nhưng giả sử nó sẽ điều chỉnh.

Sử dụng thiết kế đáp ứng và bố trí chất lỏng . Sử dụng bố trí sẽ điều chỉnh khi cửa sổ được thay đổi kích thước. Mọi người làm điều này rất nhiều, đặc biệt là trên màn hình lớn. Đây chỉ là thực hành CSS tốt. Có một số khung công tác hỗ trợ này.

Đối xử với điện thoại di động như một công dân hạng nhất . Bạn đang nhận được nhiều lưu lượng truy cập từ các thiết bị di động mọi lúc. Những giới thiệu kích thước màn hình thậm chí nhiều hơn. Bạn vẫn có thể tối ưu hóa cho 960, nhưng sử dụng các kỹ thuật thiết kế web đáp ứng có nghĩa là trang của bạn sẽ điều chỉnh dựa trên kích thước màn hình.

Đăng nhập trình duyệt thông tin hiển thị . Bạn có thể nhận được con số thực tế về điều này. Tôi tìm thấy một số con số ở đâyở đâyở đây . Bạn cũng có thể gian lận trang web của bạn để thu thập dữ liệu tương tự.

Người dùng sẽ cuộn để không lo lắng nhiều về chiều cao . Lập luận cũ là người dùng sẽ không cuộn và bất cứ điều gì quan trọng phải là "trên màn hình đầu tiên". Điều này đã bị lật ngược từ nhiều năm trước. Người dùng cuộn rất nhiều .

Tìm hiểu thêm về độ phân giải màn hình:

Thông tin thêm về thiết kế đáp ứng:

Các công cụ và khung giao diện người dùng để thiết kế đáp ứng và bố trí lỏng:


8
Bạn có thể muốn kiểm tra: 960.gs một trang web hoàn chỉnh về các thiết kế sử dụng 960 pixel trong một lưới. Kỹ thuật này được gọi là "thiết kế lưới 960".
BerggreenDK

3
Có vẻ như SO sử dụng 960 mà không có gì là chất lỏng. Chỉ cần FYI
colithium

Trang web của bạn cũng không nên cuộn ngang ở 800px. Có lẽ nó sẽ không đẹp nhất, nhưng mọi thứ vẫn phù hợp.
palswim

Bất kỳ cập nhật về điều này? Câu trả lời này đã được vài năm tuổi.
Crashalot

29

Ý tưởng tồi, tôi tin. Toàn bộ điểm trong việc tách nội dung khỏi bố cục là cho phép trang web của bạn được hiển thị trên bất kỳ loại trình duyệt nào.

Đặt các giới hạn nhân tạo như kích thước màn hình tối thiểu sẽ giới hạn thị trường của bạn.

Phải nói rằng, tôi tin rằng mọi máy tính để bàn sẽ có thể hiển thị 1024x768. Nhưng còn các trình duyệt chạy trên iPhone hoặc các thiết bị bị lỗi màn hình khác, hoặc thậm chí những trình duyệt không sử dụng toàn bộ máy tính để bàn của chúng cho trình duyệt thì sao?

Trả lời câu hỏi cụ thể của bạn, không, tôi không tin có bất kỳ tiêu chuẩn nào cho khu vực hiển thị tối thiểu hoặc chung trong các trình duyệt.


14
Chờ đã, 1024x768 có thể là toàn bộ kích thước màn hình, nhưng điều này thường được giảm bởi các thanh hệ thống, trang trí cửa sổ, thanh menu, thanh công cụ, thanh tab và thanh cuộn có khả năng và một tab điều hướng.
Svante

7
Lời khuyên tệ. Ai nói rằng HTML không dành cho bố cục? Bố trí chất lỏng là những năm 90, trong đó sự khác biệt về độ phân giải là tương đối nhỏ. Hãy thử đọc một số văn bản ở phông chữ 10pt trên màn hình 2560x1600 mà không bị giới hạn chiều rộng. Bạn sẽ bắt đầu ghét những bố cục chất lỏng rất sớm.
Wouter van Nifterick

1
@Pax: Quan điểm của tôi là rất khó để đưa ra bố cục chất lỏng hoạt động tốt ở cả độ phân giải rất thấp và rất cao. Tôi chưa bao giờ bắt gặp một trang web hoạt động độc đáo trên máy PDA của tôi và trên màn hình độ phân giải cao, với cùng một html. Những cái tốt nhất được nhắm mục tiêu cụ thể.
Wouter van Nifterick

1
đồng ý, bố trí chất lỏng làm việc tốt hơn cho tất cả mọi người. Màn hình lớn quá lớn không phải là vấn đề vì những người dùng này có thể điều chỉnh kích thước trình duyệt của họ theo bất kỳ kích thước nào phù hợp với họ.
đinh vào

9
Đối với bố cục lỏng, bạn luôn có thể đặt độ rộng tối đa để đặt giới hạn trên cho những người chạy trình duyệt tối đa hóa trên màn hình lớn.
Richard

8

Buộc người dùng của bạn cuộn theo chiều ngang là một hành vi vi phạm UI nghiêm trọng. Trừ khi bạn đặc biệt xây dựng một trang web cho dân số với kích thước màn hình đã biết, bạn sẽ đảm bảo an toàn nhất là thiết kế của bạn hoạt động với màn hình rộng tới 800 pixel (khoảng 8% dân số lướt web nếu bộ nhớ phục vụ cho tôi đúng). Sẽ là khôn ngoan khi làm cho nó thích ứng tốt với màn hình lớn hơn nhưng không phải chi phí của những người vẫn lướt ở 800x600.

Đây cũng là một điều cần xem xét: không phải ai cũng chạy trình duyệt của họ ở chế độ toàn màn hình (tôi không). Vì vậy, ý tưởng rằng nếu Ok để thiết kế cho một "kích thước màn hình" cụ thể (và lớn) thực sự không hoạt động vì một số lý do.

Cập nhật ngày 15/12/2010: Khi tôi trả lời câu hỏi này lần đầu tiên, 800 pixel là một câu trả lời thích hợp. Tuy nhiên, tại thời điểm này, tôi sẽ đề xuất chiều rộng 1024 pixel (hoặc 960 như người khác chỉ ra). Công nghệ diễu hành trên ...


Tôi sẽ mở rộng tuyên bố để có thể nói rằng buộc cuộn đa hướng là một sự vi phạm có thể. Hori-scroll có thể là tuyệt vời nếu được thực hiện chính xác. deanoakley.com thehorizontalway.com/html/css/urban-outfitters
typeoneerror

2
Những gì chúng ta cần là hai phím mới trên bàn phím, "Trang trái" và "Trang phải".
paxdiablo

@TypeOneError, mặc dù không cảm thấy tốt khi duyệt, nó không tự nhiên.
UnkwnTech

@TypeOneError, trang web danh mục đầu tư đã sử dụng nó để có hiệu quả tốt chỉ vì "sự gọn gàng" của nó và cách thiết kế sạch sẽ. Tuy nhiên, tôi đồng ý với Unkwntech rằng nó không cảm thấy đúng. Chưa kể thực tế là hầu hết người dùng sẽ có một bánh xe cuộn dọc và không phải là một bánh xe nằm ngang. Điều đó một mình làm cho cuộn ngang là một ý tưởng tồi.
Eric

@Eric, bánh xe cuộn của tôi cuộn theo chiều ngang trong hai trang web được liên kết đến. Tôi muốn nói về những thứ như danh mục đầu tư mà bạn muốn thu hút sự chú ý và thể hiện một phong cách nghệ thuật thì không sao cả. Nhưng nhìn chung nó sẽ gây nhầm lẫn cho một người dùng
khỉpushbutton

4

Dưới đây là số liệu thống kê về hiển thị trình duyệt trong năm 2008: http://www.w3schools.com/browsers/browsftimesisis.asp

Khoảng 50% người dùng vẫn đang sử dụng 1024x768. Nếu bạn muốn trang web của bạn trông đẹp ở độ phân giải cao, hãy sử dụng bố cục linh hoạt.


Tốt nhất nên nhớ rằng số liệu thống kê của w3schools dành cho những người truy cập trang web của họ. Điều này chủ yếu là những người phát triển các trang web, không phải là một mặt cắt thích hợp của dân số. Nhìn vào số liệu thống kê trình duyệt của họ, firefox là 44% trong khi IE là 46%. Có lẽ không phải là một mẫu tốt để đánh giá web nói chung.
Kibbee

3

thực sự có các tiêu chuẩn ngành cho chiều rộng (ít nhất là theo yahoo). Độ rộng được hỗ trợ của chúng là 750, 950, 974, 100%

Có những lợi thế về độ rộng này cho các lưới được xác định trước (bố cục cột) hoạt động tốt với kích thước tiêu chuẩn cho quảng cáo nếu bạn bao gồm bất kỳ.

Nói chuyện thú vị quá đáng xem.

xem cơ sở YUI


Bạn có thể thêm một liên kết đến cuộc nói chuyện mà bạn đề cập.
Sri Kadimisetty

3

Đây là một công cụ tuyệt vời: Kích thước trình duyệt Google Labs


Liên kết đã chết. Giờ đây, nó là một phần của Google Analytics, chỉ có thể truy cập bằng thông tin đăng nhập, trong Đối tượng> Công nghệ> Trình duyệt & HĐH> chọn "Độ phân giải màn hình".
Dave Liepmann

2

Tôi muốn nói rằng bạn chỉ nên mong đợi người dùng có một màn hình với độ phân giải 800x600. Chính phủ Canada có các tiêu chuẩn liệt kê đây là một trong những yêu cầu. Mặc dù điều đó có vẻ thấp đối với ai đó với màn hình rộng ưa thích, hãy nhớ rằng không phải ai cũng có một màn hình đẹp. Tôi vẫn biết rất nhiều người chạy ở 1024x768. Và không có gì lạ khi gặp phải ai đó đang chạy trong 800x600, đặc biệt là trong các quán cà phê web giá rẻ khi đi du lịch. Ngoài ra, thật tuyệt khi phải làm cho cửa sổ trình duyệt của bạn toàn màn hình nếu bạn không muốn. Bạn có thể làm cho trang web rộng hơn trên màn hình rộng hơn, nhưng đừng khiến người dùng cuộn theo chiều ngang. Không bao giờ. Một ưu điểm khác của việc hỗ trợ độ phân giải thấp hơn là trang web của bạn sẽ hoạt động trên điện thoại di động và Nintendo Wii dễ dàng hơn rất nhiều.

Một lưu ý về chiều rộng tối thiểu 1280 của bạn, tôi sẽ phải nói rằng đó là quá mức. Hầu hết các màn hình không màn hình rộng 19 inch và thậm chí 19 inch của tôi chỉ hỗ trợ độ phân giải tối đa 1280x1024. Và máy tính xách tay màn hình rộng 14 inch tôi đang gõ bây giờ chỉ có 1280 pixel. Tôi có thể nói rằng độ phân giải tối thiểu lớn nhất bạn nên phấn đấu là 1024x768, nhưng 800x600 sẽ là lý tưởng.


2

Tất cả các câu trả lời cho đến nay đều nói về màn hình máy tính để bàn, nhưng tôi đang sử dụng stack stack trên iPhone của tôi và tôi không nghĩ bạn nên loại trừ bất kỳ nền tảng di động nào bằng cách nhắm mục tiêu 1024 hoặc 1280 pixel ngang. Đánh dấu trang của bạn để trình duyệt biết tất cả ý nghĩa của nó và làm cho nó có thể sử dụng được sẽ miễn phí, ngay cả trên trình đọc màn hình và các bộ khác mà bạn chưa từng nghĩ tới.


Bravo, nâng cao kể từ khi bạn đồng ý với tôi :-) mặc dù trong hai suy nghĩ về điều đó vì bạn có thể nhận được nhiều phiếu hơn tôi :-(. Oh tốt, c'est la vie.
paxdiablo

+1 để gõ phản hồi rõ ràng bằng bàn phím iphone. ;) Trang web của tôi trông tuyệt vời ở 1024 với safari của iphone, fwiw.
typeoneerror

Với iPhone tôi nghĩ nó sẽ phụ thuộc vào cách bạn cầm nó, dọc hay ngang vì rõ ràng kích thước sẽ khác nhau
UnkwnTech

1
@TypeOneError không chỉ tôi gõ nó trên iPhone, tôi cũng đang đi lại từ quán rượu ;-)

@Pax không, hình như tôi sẽ không. ;-)

1

Tốt nhất là không nhắm mục tiêu bất kỳ độ phân giải cụ thể nào, nhưng để dễ dàng thích ứng với nhiều độ phân giải khác nhau.


1

Các nguyên tắc chúng tôi sử dụng, dường như được sử dụng khá rộng rãi và được hỗ trợ bởi các số liệu chúng tôi nhận được từ Google Analytics, là thiết kế trang web để nó hoạt động trên màn hình rộng 1024 pixel và cao 768 pixel (1024x768 và 1280x800 là độ phân giải phổ biến nhất mà chúng tôi thấy, chiếm ít nhất 70% tổng lưu lượng truy cập).

Đây là lý do tại sao bạn thấy nhiều trang web (bao gồm trang này) sử dụng cột trung tâm rộng khoảng 1000 pixel và có nội dung quan trọng nhất trong 500-600 pixel trên cùng để nó nằm trên màn hình khi được xem trong màn hình kích thước này.

Sử dụng bố cục rộng 1000 pixel hoạt động khá tốt trên kích thước màn hình có chiều rộng lên tới khoảng 1680 pixel (thường cao như bạn sẽ thấy trên máy tính xách tay, ngoại trừ màn hình lớn 17)) nhưng bắt đầu trông hơi ngớ ngẩn trên 1920 pixel máy tính rộng (máy tính cao cấp, thường là máy trạm), tuy nhiên độ phân giải rất cao này không chiếm tỷ lệ lớn lưu lượng truy cập trên internet nói chung - 2% hoặc ít hơn (mặt khác, nếu bạn có đối tượng chuyên gia như trang web này , con số với độ phân giải cao có thể cao hơn một chút).


Nếu bạn đang bỏ phiếu thì vui lòng thêm nhận xét về lý do.
Greg Beech

1

Mặc dù chiều rộng tốt nhất có thể bằng 1024, bạn sẽ phải điều chỉnh chiều cao cho tài khoản cho các cài đặt trình duyệt khác nhau (thanh công cụ điều hướng, thanh công cụ đánh dấu, thanh công cụ trạng thái, v.v.) và tài khoản cho cài đặt trên thanh tác vụ. Nó sẽ nhanh chóng giảm 768 xuống còn khoảng 550.


1

Dù kích thước trình duyệt mục tiêu của bạn là bao nhiêu, hãy đảm bảo bao gồm không gian cho thanh công cụ trình duyệt, thanh trạng thái và thanh cuộn như trên. Internet Explorer (IME) thường có không gian dọc trên 100px trong thanh công cụ và thanh trạng thái. Thông thường, nếu tôi chụp ở độ phân giải 1024 x 768, tôi sẽ cố gắng tạo ra một thiết kế rộng khoảng 960 - 980px và cao 600px để an toàn. Bằng cách đó, bạn có thể di chuyển cuộn nếu cần thiết và một số khoảng trắng đẹp (nếu thiết kế yêu cầu). Tôi đặc biệt khuyên dùng lưới YUI cho các trường hợp bạn cần nhắm mục tiêu kích thước cụ thể:

Lưới YUI


1

Tôi nhận được câu hỏi rất nhiều từ các nhà thiết kế về không chỉ chiều rộng mà cả chiều cao cần sử dụng để 'giữ mọi thứ trên màn hình'. Đây là một câu trả lời tôi đã đưa ra gần đây -

Đối với chiều rộng, tôi không phải là nhà thiết kế nhưng tôi đã đọc rằng chiều rộng 960px là cách để đi vào những ngày này, bởi vì nó được chia thành các cột trông đẹp và vừa vặn trong hầu hết các màn hình. Nếu bạn có thể, hãy thiết kế bố cục lỏng - nhưng điều này không phải lúc nào cũng thực tế tùy thuộc vào nhà thiết kế, kỹ năng CSS của bạn, hình ảnh và số lượng văn bản.

(bạn luôn muốn có 65-80 ký tự trên mỗi dòng, với chiều cao dòng khoảng 1,15). Đây là chiều rộng cột tối ưu cho văn bản và nó đã được chứng minh là nhanh và dễ đọc hơn nhiều so với các cột rất rộng hoặc hẹp)

Theo như "trên màn hình đầu tiên", tôi chỉ cần thận trọng với việc sử dụng bất kỳ khái niệm nào như vậy trên web. Cuộn ngang có thể và nên tránh, nhưng cuộn dọc là điều bạn không thể tránh 100%. Tất cả những gì tôi có thể nói với bạn là trên màn hình 1024x768 (ít nhất 95% người dùng có hoặc cao hơn), bạn sẽ ổn với khối cao 600px cố định. Nhưng có nhiều định dạng hiển thị khác nhau, chrome trình duyệt có thể chiếm rất nhiều chỗ và không phải ai cũng tối đa hóa cửa sổ trình duyệt.

Theo một số liệu thống kê thực tế, đây là một số trang web khác nói ít nhiều giống nhau - nhưng việc lên kế hoạch để có được mọi thứ hoàn toàn 'trên màn hình' đối với mọi người là khó khăn bởi vì sau đó bạn có thể chỉ có 400px hoặc hơn, theo thống kê thực tế.

Và cuối cùng là một bài viết dài rất hay đi sâu vào chi tiết (Tôi sẽ đăng nhiều hơn nhưng SO nói tôi quá noob) - Cách thiết kế cho Kích thước trình duyệt - baekdal.com


1

Cá nhân tôi luôn bị mắc kẹt với chiều rộng tối đa 1000px, tập trung ở giữa trang (thông qua lề trái / phải: tự động).

Nếu bạn đang chạy ở bất cứ thứ gì dưới 1024x768, đã đến lúc nâng cấp. Nghiêm túc. Đó là gần năm 2010. Bạn có thể mua màn hình LCD bin mặc cả với độ phân giải 1280x1024.


Để thêm vào điều này, tôi vừa mua một màn hình LCD màn hình rộng 23 inch 1080p (1920x1080) với giá 150 đô la vào thứ sáu đen này.
Lén lút

2
Tôi không thể thấy màn hình của nhà phát triển có tầm quan trọng như thế nào đối với câu hỏi? khách truy cập của trang web quan trọng như tôi thấy nó? Bởi vì đó là một khuyến nghị tốt để có được màn hình tốt hơn hoặc nhiều hơn một màn hình.
BerggreenDK

1

Tôi khuyên bạn nên xem xét các truy vấn truyền thông. Đây là một bổ sung mới hữu ích cho CSS thực sự rất có ý nghĩa, bạn sẽ tự hỏi tại sao điều này không được triển khai trước đó. Về cơ bản, nó cho phép bạn nhắm mục tiêu các thuộc tính trình duyệt (chẳng hạn như chiều rộng tối đa và tối thiểu) trực tiếp thông qua CSS và phân nhánh mã bố cục của bạn từ đó. Tương tự như việc tạo một bản định kiểu in, bạn có thể tạo các bố cục máy tính để bàn và thiết bị di động song song trong cùng một tệp, giúp phát triển.


1

Bố cục linh hoạt hoặc lỏng làm hạn chế thiết kế một chút, ví dụ, nếu bạn sử dụng hình nền phải phù hợp với hình nền cơ thể.

Tôi thà tạo các bố cục css khác nhau cho trang web và áp dụng chúng tùy thuộc vào độ phân giải của người dùng hoặc nếu điều đó là không thể (chưa được đào sâu vào đó), hãy biến nó thành một lựa chọn có thể lựa chọn.


1

Được rồi, tôi thấy rất nhiều thông tin sai lệch ở đây. Đối với người mới bắt đầu, việc tạo một trang web bằng một độ phân giải nhất định, ví dụ 800x600, làm cho trang đó hiển thị đúng chỉ bằng độ phân giải đó! Khi cùng một trang được hiển thị trên máy tính xách tay của người khác hoặc màn hình PC tại nhà, trang đó sẽ được hiển thị bằng độ phân giải hiện tại của màn hình đó, KHÔNG phải độ phân giải bạn đã sử dụng khi thiết kế trang. Đừng tạo các trang web cho một độ phân giải cụ thể! Có quá nhiều tỷ lệ khung hình và độ phân giải màn hình khác nhau để mong đợi một kịch bản "một kích thước phù hợp với tất cả", với thiết kế web không tồn tại. Đây là giải pháp: Sử dụng CSS3 Media Queries để tạo mã có thể điều chỉnh độ phân giải. Đây là một ví dụ:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Hãy xem, những gì chúng ta vừa làm là chỉ định 3 bộ kiểu kết xuất ở các độ phân giải khác nhau. Trong trường hợp ví dụ của chúng tôi, nếu độ phân giải của màn hình lớn hơn 800px, CSS cho 1024 sẽ được thực thi thay thế. Tương tự, nếu màn hình hiển thị nội dung là 1224px, 1280 sẽ được thực thi kể từ 1224 lớn hơn 1024. Trang web tôi đang làm việc hiện có chức năng ở mọi độ phân giải 800x600 đến 1920x1080. Một lưu ý khác là không phải tất cả các màn hình có cùng độ phân giải đều có cùng kích thước màn hình. Bạn có thể đặt 15,4 máy tính xách tay cạnh nhau, trong khi cả hai trông giống nhau, cả hai đều có độ phân giải khác nhau đáng kể, vì không phải tất cả các pixel đều có cùng kích thước trên các màn hình LCD khác nhau. Vì vậy, hãy sử dụng truy vấn phương tiện và bắt đầu tạo trang web của bạn bằng màn hình máy tính xách tay với độ phân giải cao, đặc biệt là 1280+. Cũng thế, tạo mỗi truy vấn phương tiện bằng một độ phân giải khác nhau trên máy tính xách tay của bạn. Bạn có thể sử dụng cài đặt độ phân giải của mình trong Windows để điều chỉnh xuống 800x600 và tạo truy vấn phương tiện ở độ phân giải đó, sau đó chuyển sang 1024x768 và tạo một truy vấn phương tiện khác tại độ phân giải đó. Tôi có thể tiếp tục, nhưng tôi nghĩ các bạn nên hiểu rõ.

CẬP NHẬT: Đây là một liên kết để sử dụng các truy vấn phương tiện sẽ giúp giải thích thêm, Thiết kế web sáng tạo cho các thiết bị di động với Truy vấn phương tiện

Hướng dẫn đó sẽ chỉ cho bạn cách thiết kế cho tất cả các thiết bị. Ngoài ra còn có hướng dẫn cho Truy vấn truyền thông cụ thể. Tôi đã phát triển toàn bộ trang web để hiển thị trên tất cả các thiết bị, tất cả màn hình và tất cả các độ phân giải không sử dụng tên miền phụ và chỉ CSS! Tôi vẫn đang làm việc trên hỗ trợ cho máy tính bảng và điện thoại thông minh. Trang web hiển thị hoàn hảo trên mọi máy tính xách tay hoặc TV LCD 50 inch của bạn và nhiều trang hoạt động hoàn hảo trên tất cả các thiết bị di động. Nếu bạn đặt tất cả mã của mình lên trang, thì các trang của bạn sẽ tải nhanh lên! Ngoài ra, hãy chắc chắn chú ý thảo luận trong bài viết đó về CSS "kích thước nền: bìa;" hoặc "chứa" các thuộc tính, chúng sẽ làm cho đồ họa nền của bạn trôi chảy và có thể hiển thị hoàn hảo ở mọi độ phân giải.

Thực hiện theo các hướng dẫn trang web và bạn có thể tạo một trang web duy nhất hiển thị mọi thứ và mọi thứ!


0

Cố gắng nhắm mục tiêu 1024 là chiều rộng tối thiểu. Hãy thử xem 800, nhưng đừng bận tâm quá nhiều vào việc đó. Với 800x600, hầu như không có trang web lớn nào hoạt động, vì vậy những người làm việc ở độ phân giải đó sẽ luôn gặp vấn đề.

Nếu bạn sắp có bố cục lỏng, hãy đảm bảo rằng văn bản không quá rộng , vì khi các dòng quá dài, chúng sẽ trở nên khó đọc. Đó là lý do chính tại sao hầu hết các trang web có chiều rộng cố định.


Tôi hoàn toàn đồng ý với cả hai điểm. Tôi đi rộng khoảng 960 (vì vậy đối với màn hình 1024x768). Các nhà thiết kế web cũng phải đảm bảo rằng độ dài của dòng không quá dài, nếu không nó thực sự khó đọc.
Philip Morton

0

Tôi nhắm mục tiêu màn hình 1024 pixel (nhưng không sử dụng 100% dung lượng đó). Tôi đã từ bỏ những người có 800x600. Tôi thà trừng phạt một số ít với phần cứng lỗi thời bằng cách làm cho chúng cuộn nếu cần, thay vì trừng phạt mọi người bằng thiết bị mới bằng cách lãng phí không gian.

Tôi cho rằng nó phụ thuộc vào đối tượng của bạn và bản chất của ứng dụng bạn.


0

Cuối cùng, đây không phải là vấn đề về tiêu chuẩn hoặc thực tiễn tốt nhất để đánh dấu, mà là biết đối tượng của bạn và đảm bảo trang web của bạn làm những gì bạn muốn nó làm.

Điều quan trọng hơn là xem xét độ rộng của chế độ xem của trình duyệt thay vì độ phân giải màn hình - bạn không thể cho rằng mọi pixel trên màn hình sẽ được phân bổ cho trình duyệt (và ngay cả khi đó, bạn phải trừ chrome trình duyệt). Nếu bạn có quyền truy cập vào các phân tích báo cáo chiều rộng trình duyệt ( chiều rộng trình duyệt nb , không phải độ phân giải màn hình) thì hãy chú ý thật kỹ.

Thật tuyệt khi cố gắng đáp ứng phạm vi quan sát rộng nhất có thể nhưng có một số hạn chế. Một số thách thức có thể được xử lý với các loại phương tiện CSS , một số không thể. Một số có thể được xử lý với bố trí chất lỏng. Nhưng bố trí chất lỏng không thể hoạt động trong mọi tình huống, tùy thuộc vào loại thông tin sẽ được hiển thị, độ dài dòng, sự thoải mái khi đọc, v.v. Một số bố trí chất lỏng không hoạt động trong màn hình rộng. Hầu hết vỡ khi có kích thước dưới một chiều rộng nhất định, vv

Nhiều như cá nhân tôi muốn thiết kế cho chế độ xem ~ 960 pixel trở lên, bạn không thể luôn làm điều đó. Vì vậy, trong một số trường hợp, vẫn an toàn nhất để thiết kế cho chế độ xem <= 760 pixel hoặc hơn (màn hình rộng 800 pixel, tối đa hóa) - mặc dù thời gian cuối cùng chúng ta có thể ném giới hạn này một lần và cho tất cả - cho máy tính để bàn ít nhất - đang tiếp cận rất nhanh.

Trường hợp chuyển đổi là một vấn đề - và bạn có bố cục chiều rộng cố định - tốt hơn hết là bạn có lý do chính đáng để đặt bất cứ thứ gì mà người dùng cần nhấp vào để máy tính tiền đi "ka-ching" ở bất cứ nơi nào ở phía đông của 760 pixel.

Ditto cho điều hướng chính.

Cuối cùng, kiểm tra bố cục của bạn trong mọi thứ bạn có thể có trong tay. Lớn. Nhỏ. Máy tính để bàn. Cầm tay. Các công trình. Không có gì thay thế.


0

Tôi vừa lấy mẫu độ phân giải màn hình từ tất cả các trang web khách hàng tôi có quyền truy cập, bao gồm hơn 20 trang web trong hơn 8 ngành công nghiệp ở đây là kết quả:
văn bản thay thế http://unkwndesign.com/so/percentScreenResolutions.png
Dựa trên điều này tôi sẽ nói chắc chắn rằng nó trông ổn trên 1024x768 vì đó là phần lớn ở đây bởi một cú sút xa. Cũng đừng lo lắng về chiều cao, tuy nhiên hãy cố gắng tránh làm cho hầu hết các trang nhiều hơn 1-2 trang in ở cỡ chữ mặc định của bạn, hầu hết mọi người sẽ không đọc một trang dài và nếu người dùng cài đặt thanh công cụ chiếm hết không gian theo chiều dọc, sở thích cá nhân của tôi là vấn đề của họ, nhưng tôi không nghĩ đó là vấn đề lớn.

* lưu ý tỷ lệ phần trăm thêm lên tới 100,05% vì làm tròn số.


0

Hãy nhớ rằng độ phân giải càng cao, trình duyệt internet sẽ càng ít được tối đa hóa.

Và một số trình duyệt có thanh bên.

Nó phụ thuộc vào những gì bạn muốn kết xuất, nhưng tôi sẽ đi với bố cục chiều rộng thay đổi không phá vỡ ở chiều rộng khoảng 800-900.

Chiều cao không thực sự là một vấn đề.


0

sbeam nói rằng "bạn luôn muốn có 65-80 ký tự trên mỗi dòng". Điều đó không đúng. Wikipedia, ví dụ, có thể có 180 ký tự trên mỗi dòng. Hay nó có nghĩa là một trang web cụ thể?

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.