Thiết lập đệm cho các trang web trong thiết bị di động

Tôi đã hoàn thành trang web này một thời gian trước nhưng đã xảy ra sự cố và bây giờ tôi đã dành cả ngày sửa chữa và lấy lại từ đầu vì bản sao lưu của tôi không được thực hiện chính xác. Tôi không hoàn toàn hiểu những gì nó đang làm khi tôi đã thực hiện kỹ thuật này trên nhiều trang web khác mà không gặp khó khăn gì, có lẽ tôi đã xem trang web này quá lâu?Thiết lập đệm cho các trang web trong thiết bị di động

Here is the website. Tôi muốn đặt một số không gian ở phía bên trái và bên phải, tuy nhiên tôi không chỉ có một container vì tôi đã cần thanh màu xám đậm ở 100% của màn hình và luôn luôn dưới các biểu ngữ không có vấn đề mà nó được. Vì vậy, có 4 "chứa" divs mà tôi muốn có không gian. Tôi đã đặt các truy vấn phương tiện truyền thông CSS3 như vậy nhưng bây giờ tôi đang nhận được một khoảng trống ở bên phải. Tôi đã nghĩ rằng đó là bởi vì các pháp sư nền của tôi đang trải qua tất cả các cách nhưng họ đặt ở 100% vì vậy tôi chỉ không hiểu những gì đang xảy ra. Nó somethign đơn giản, tôi không nhìn thấy nó ngay bây giờ ..

Đây là những gì tôi đã cho giới truyền thông truy vấn

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; } 

}

Đây là những gì t trông giống như trên iPhone của tôi

enter image description here

Bất kỳ lời khuyên nào đều hữu ích và được đánh giá cao.

Nguồn

2012-11-05 kia4567

@ambrealsweb bạn đã hiểu điều tôi đang nói về nó ......... –

Nhìn vào thẻ meta viewport. Nếu bạn đã thêm mã vào trang của mình là <head>:

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

Điều đó sẽ buộc chế độ xem của iPhone hiển thị rộng 1100px. Chế độ xem mặc định trên iPhone là 980px, vì vậy trang của bạn ngụ ý rằng chiều rộng 100% là 980px chứ không phải chiều rộng của nội dung thực.

Viewport có thể được khôn lanh, đây là một số thông tin thêm về nó:

Viewport meta tag for non-responsive design

Nguồn

2012-12-13 00:57:22 djfarrelly

Tùy chọn này hoạt động tốt nhất cho bố cục của tôi. Cảm ơn! – kia4567

Tôi đã kiểm tra các trang web hoạt động, có vẻ như vấn đề là xuống chỉ còn 3 điểm ảnh không gian thêm ở bên phải. Tôi cũng nhận thấy một ngắt dòng trong menu điều hướng. Có vẻ như thay đổi các truy vấn phương tiện truyền thông điện thoại thông minh để sau đây sẽ giải quyết vấn đề cuối cùng:

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; } 
#banner { padding: 0; } 
#header-right { width: auto; } 
#access .menu-header { width: auto; } 

h4 { font-size: 1.4em; line-height: 1em; } 
}

Nguồn

2012-12-13 02:07:17 tiffon

Làm thế nào về điều này:

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; } 
#header, #content, #stuff, #etc { margin:0;padding:0; } 
#inside stuff { whatever else; }

Bó #wrapper xung quanh ngoài cùng DIV (ngay sau khi <body> và gần gũi của bạn trước </body>).

Trừ khi kế hoạch của bạn định vị một số phần tử bên ngoài vùng đệm 2em, tôi không thể tưởng tượng được tại sao đây không phải là giải pháp hiệu quả hơn cho vấn đề của bạn.

Nguồn

2012-12-13 23:01:55 FurryWombat

Thiết lập đệm cho các trang web trong thiết bị di động

Trả lời

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