Trả lời trên thiết bị di động có các bảng không hoạt động trong iframe

Tôi đang gặp sự cố khi trang web của tôi xuất hiện trên thiết bị di động thực tế, nhưng khi tôi thay đổi kích thước màn hình trên máy tính của tôi, nó có vẻ ổn. Đây cũng nằm trong iframe và trông đẹp bên ngoài iframe trên thiết bị di động. Dưới đây là URL thực, nhấp vào tìm kiếm người chơi và bạn sẽ thấy trang.Trả lời trên thiết bị di động có các bảng không hoạt động trong iframe

http://adidasuprising.com/adidas-grassroots-mens-events/adidas-gauntlet-series/dallas/

CẬP NHẬT

Hình như ai đó có vấn đề này. (Responsive)Table Width does not fit the container inside iframe on ios safari

Desktop đổi kích thước

enter image description here

Google Chrome trên iPhone

enter image description here

Nguồn

2015-04-24 Mike Flynn

tôi cố định nó với điều này từ page này.

iframe { 
     width: 1px; 
     min-width: 100%; 
     *width: 100%; 
    }

Nguồn

2015-04-27 13:13:54

Thêm

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

bên trong <head></head>, tôi đoán bạn đã bỏ lỡ điều đó.

Nguồn

2015-04-24 09:29:58 Zee

Có trên đó ???? –

Bạn không thể làm cho bảng đáp ứng, trừ khi bạn sử dụng a JS solution.

Bên cạnh đó, bảng của bạn là trong một iFrame, vì vậy bạn phải thiết lập một cuộn với nó.

Trong truy vấn phương tiện truyền thông của bạn thiết lập các width đến iframe:

#exp-schedule-container { width: 1200px; }

và thiết lập di chuyển đến exp-schedule:

#exp-schedule { overflow-x: scroll; }

Nguồn

2015-04-24 09:49:47

Tôi có nghĩa là đáp ứng trong gói nó trong một div cuộn. Tôi không có quyền truy cập vào khung bên ngoài như thế. Điều này phải là một cái gì đó nhiều hơn nữa. –

Tôi không chắc chắn nếu tôi hiểu câu hỏi của bạn. Bạn muốn Cuộn Bảng trên thiết bị di động phải không?

Vì vậy, bạn đã đóng iframe trong div;

<div class="scrollablewrapper"></div>

css

.scrollablewrapper { 
-webkit-overflow-scrolling: touch; 
overflow-y: scroll; 
position: fixed; 
right: 0; 
bottom: 0; 
left: 0; 
top: 0; 
} 

.scrollablewrapper iframe { 
height: 100%; 
width: 100%; 
}

Nguồn

2015-04-27 09:57:08

Có nhưng nếu bạn truy cập trang trình phát, bạn có thể thấy trang đó trải dài và không được gọi đến chế độ xem 480px. Nó không có bàn. Ngoài ra tôi không có quyền truy cập vào iframe bên ngoài. –

Nếu bạn không có quyền truy cập vào iframe bên ngoài, bạn có thể thay đổi nội dung khác không? [Ví dụ: phần thân có chiều rộng cố định và "tràn: cuộn;" ] –

Chiều rộng cố định ở đâu? Tôi có thể làm cho nó cuộn nếu cần thiết nhưng vấn đề là, không nên trang đưa vào tài khoản các viewport 480px trên điện thoại của tôi? Điều đó xảy ra nếu tôi xóa các bảng khỏi trang.Bạn cũng có thể thấy trên máy tính để bàn của tôi, nó hoạt động như mong đợi, không chỉ trên iPhone. Nó thậm chí hoạt động trên Android. Bảng cuộn, nhưng tôi chỉ muốn chiều rộng để phù hợp với khung nhìn mà nó không trên iPhone. –

Trả lời trên thiết bị di động có các bảng không hoạt động trong iframe

Trả lời

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