truy vấn phương tiện không áp dụng bên trong khung nội tuyến của ứng dụng di động

Question

Tôi gặp sự cố lạ khi tải trang web trong iframe của ứng dụng dành cho thiết bị di động của mình. Tôi đang có một trang web với bảy trang. Khi tôi duyệt url trang web của tôi trong safari của iphone. Nội dung trong tất cả các trang được hiển thị hoàn hảo. nhưng nếu tôi tải trang web trong iframe bên trong ứng dụng di động của tôi, android sẽ hiển thị chính xác trang web bên trong khung nội tuyến của ứng dụng di động. Nhưng trong iphone ba trong số các trang nội dung bị tràn và tôi không thể xem toàn bộ trang. Truy vấn phương tiện của tôi được liệt kê bên dưới. Bằng cách này tôi đang sử dụng khung bootstrap cho trang web của tôi.

@media (min-width: 768px) and (max-width: 979px) { 
     // css goes here 
    } 
    @media (min-width: 768px) 
    { 
    // css goes here   
    } 
    @media (max-width: 767px) { 
    // css goes here    
    } 
    @media (min-width: 1200px) { 
     // css goes here    
    } 
    @media (min-width: 768px) and (max-width: 979px) { 
     // css goes here    
    } 
    @media (max-width: 767px) { 
     // css goes here 
    } 
    @media (max-width: 480px) { 
     // css goes here 
    } 
    @media (max-width: 320px) 
    { 
     // css goes here 
    } 
    @media (max-width: 240px) 
    { 
    // css goes here 
    } 
    @media (max-width: 979px) { 
    // css goes here 
    } 
    @media (min-width: 980px) { 
    // css goes here 
    } 

Có bất kỳ truy vấn phương tiện nào khác nhắm mục tiêu iframe bên trong ứng dụng di động của iphone hay không. Tôi mới sử dụng phương tiện truyền thông đáp ứng này. Hãy giúp tôi. Khi tôi đáp ứng thời hạn của khách hàng trong hai ngày, tôi phải giải quyết vấn đề này.

Xin cảm ơn trước.

Answer 1

Đôi khi trình duyệt không hiển thị các tính năng mediaqueries. Hãy thử điều này thêm vào phần đầu của bạn. Có thể bạn sẽ có được một số may mắn.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />