Chiều rộng 100% không hoạt động trên iOS

Question

Đối với một số lý do trên iphone, chân trang của tôi không kéo dài trên màn hình, mặc dù nó được đặt thành chiều rộng: 100%. Bạn có thể xem một ví dụ về vấn đề chân trang của tôi ở đây: http://pixelcakecreative.com/tla2/

css của tôi cho chân là như sau:

#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;} 

Vấn đề này chỉ áp dụng cho các thiết bị iOS, như cách bố trí hoạt động tốt trên các trình duyệt máy tính. Bất kỳ ý tưởng làm thế nào để sửa lỗi này? Tôi đã thử mọi thứ tôi có thể nghĩ đến. Cảm ơn!

Answer 1

Hãy thử bằng cách đơn giản hóa tên khung nhìn meta của bạn (ít nhất là cho iOS) để dòng sau:

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

Ít thuộc tính hơn bình thường mà bạn biết, nhưng tôi đã làm việc cho các dự án di động của tôi.

Bây giờ, khi kiểm tra kỹ hơn, phần lớn nếu trang web của bạn nằm dưới 'trung tâm', và sau đó bạn có trình bao bọc và chân trang.

Mã được sử dụng cho trình bao bọc và chân trang khác nhau. Wrapper có width:941px; cố định trong khi chân trang chỉ có width:100%. Phần lớn các phần tử bên trong trình bao bọc có width:100% nhưng chỉ hoạt động vì trình bao bọc có width: 941px.

Vì vậy, bạn có thử thêm rằng cùng một chiều rộng và đệm tới chân {width:941px; padding:30px 34px;} hoặc một cái gì đó dọc theo những đường HOẶC

Bạn ném chân bên trong một wrapper tương tự với một cố định với, đệm, vv và sau đó chúng ta hãy để cho chân giữ width:100%;

Answer 2

Bạn đang có thể bị thiếu thẻ meta viewport di động
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

này là cần thiết để các thiết bị di động như iOS đúng quy mô trang để viewport. Bạn có thể read about it here hoặc here.

Answer 3

Hãy thử bỏ trống ở quy mô ban đầu và tỷ lệ tối đa và sử dụng người dùng cuộn được = không. Hai cái đầu tiên cho cùng một lỗi trong một dự án của chúng ta với thiết kế đáp ứng. Tôi chưa biết tại sao.

Answer 4

div#innerFooter của bạn đang ngăn chân để mở rộng đúng cách, điều chỉnh độ rộng đến 100% và rằng nên sửa chữa nó

#innerFooter {width:100%}