Câu hỏi Trang Bootstrap đơn giản không đáp ứng trên iPhone


Tôi đã tải xuống ví dụ về Twitter Bootstrap và tạo một dự án đường ray đơn giản với nó. Tôi sao chép css khi cần thiết và nó sẽ hiển thị tốt. Tôi cũng đã sao chép js và mọi thứ hoạt động tốt trên máy tính để bàn của tôi: nó sắp xếp lại trang khi tôi thay đổi kích thước trình duyệt của mình. Khi sử dụng một số "công cụ kiểm tra thiết kế đáp ứng" với các kích thước khác nhau, nó hoạt động rất tốt.

Vấn đề tôi có là trên iPhone của tôi: nó hiển thị juste như trên máy tính để bàn của tôi.

Khi tôi thử trang Ví dụ về Bootstrap Hero (đây là trang tôi bắt đầu), nó hoạt động tốt trên iPhone của tôi.

Điều gì có thể xảy ra? Tôi có khá nhiều không xúc động với bất kỳ CSS, tôi chỉ cần thêm một padding trên footer.

FYI, CSS tôi đã thay đổi là tôi đang liên kết ứng dụng của mình với application.css với nội dung sau:

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

75
2018-02-21 22:37


gốc


Bạn có thể đăng một trang thử nghiệm hoặc một số mã không? - Andres Ilich
@AndresIlich, tôi đã cảm ơn. - RaySF
Nó đáp ứng cho tôi. Tại sao bạn nghĩ nó không đáp ứng? - Jesse Wolgamott
@RaySF tôi không thể nhìn thấy nguyên nhân của lý do tại sao nó không nên làm việc, mặc dù tôi có một số điều về @import quy tắc bạn đang sử dụng nhưng đó là cá nhân. Bạn có thể gửi một trường hợp thử nghiệm? - Andres Ilich
@RaySF Do bản chất công việc của tôi, tôi đã phải nghiên cứu các cách để tăng khả năng tương thích và tăng hiệu suất của các bảng định kiểu rất lớn được xếp chồng lên nhau bằng cách sử dụng @import phương pháp ký hiệu. Trên đường đi tôi thấy nhiều vấn đề đã có do kỹ thuật đó và thấy rằng có một hit hiệu suất biiig (và cũng có rất nhiều lỗi không thể giải thích được) sau đó đã được sửa bằng cách thêm các bảng định kiểu bằng cách sử dụng html <link> nhãn. Nghi ngờ rằng sau này được hỗ trợ bởi các câu hỏi như điều này ở đây trong SO. - Andres Ilich


Các câu trả lời:


Đảm bảo bạn thêm:

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

cho bạn <head>.

Tôi đã có một vấn đề tương tự và tôi nhầm tưởng rằng đó chỉ là vấn đề về chiều rộng khung nhìn.

Cập nhật: hãy xem @NicolasBADIA để có phiên bản hoàn chỉnh hơn.


165
2018-02-23 04:37



Rực rỡ, nó hoạt động, cảm ơn! - RaySF
và điều này, để có được cả chế độ xem dọc và ngang làm việc: <meta name = "viewport" content = "width = device-width; scale ban đầu = 1.0; thang tỷ lệ tối đa = 1.0; người dùng có thể mở rộng = 0;" /> - virtualeyes
@virtualeyes, cảm ơn vì mẹo! bất kỳ ý tưởng làm thế nào để cho phép người dùng mở rộng quy mô và có được xem lanscape làm việc đúng cách? - Andrei
Không, tôi sử dụng điện thoại di động JQuery, không phải là một người tin tưởng lớn trong thiết kế đáp ứng. Để điện thoại di động di động và máy tính bảng và lên trên, máy tính để bàn. Bất cứ điều gì ở giữa, không quan tâm ;-) - virtualeyes


Mã được đề xuất bởi frntk không hoạt động khi bạn bật thiết bị ở chế độ xem ngang và giải pháp được đưa ra bởi các thuật ngữ không chính xác vì nó sử dụng dấu chấm phẩy thay vì dấu phẩy. Đây là mã chính xác:

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

Nguồn: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag


103
2018-04-12 09:23



Các ví dụ trong trang web chính thức của Twitter Bootstrap nên được cập nhật để sử dụng. - wenbert
Thông báo tuyệt vời, cảm ơn! Đã có vấn đề tương tự với lần lượt màn hình, bây giờ hoạt động như một say mê. - Mark Vital
đã cứu tôi rất nhiều thời gian tôi chắc chắn ... đã làm việc hoàn hảo. - dmillion
Đây sẽ là câu trả lời được chấp nhận! - Sheharyar


Cấp, một trường hợp rất nhỏ, nhưng đáng nói đến.

Nếu bạn đang sử dụng chuyển tiếp miền thông qua Nhà cung cấp DNS của mình, trang web của bạn có thể bị đưa vào khung nội tuyến. GoDaddy, ví dụ, sử dụng kỹ thuật này nếu bạn đang che giấu tên miền của bạn và chuyển tiếp.


6
2017-07-16 00:04



Tôi đã dành hàng giờ cố gắng để giải quyết vấn đề này và cuối cùng đã đi qua nhận xét này. Cảm ơn bạn! - Ed Shee
Nhận xét này sẽ làm cho một nhóm nhỏ người rất rất hạnh phúc. - Nicolas Rojo
Tôi không thấy một khung nội tuyến bao quanh, nhưng có vấn đề với các thẻ meta bên phải, họ có thể ẩn iframe không? - helle


Tôi đã bị mắc kẹt về vấn đề này trong vài giờ.

Đừng quên đặt nội dung bên trong <div class="container-fluid">...</div>


2
2018-01-03 23:34





thêm vào thẻ đầu của bạn nó hoạt động đáp ứng mát mẻ trên mọi thiết bị đảm bảo rằng thêm được sử dụng để chiều rộng đầy đủ với điều chỉnh đáp ứng


-3
2018-06-01 12:14



<meta name = "viewport" content = "width = thiết bị chiều rộng, tỷ lệ ban đầu = 1.0"> - Kiran Muli
Câu trả lời của bạn khác với câu trả lời có hơn 110 phiếu bầu là bao nhiêu? Ngoài ra, bạn nên chỉnh sửa câu trả lời thay vì thêm thông tin bổ sung trong nhận xét - Spidey