Home >Web Front-end >JS Tutorial >Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page

Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page

不言
不言Original
2018-08-25 11:24:416014browse

The content of this article is to introduce the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

The iframe version of layuiadmin's official demonstration works fine on Android, but on ios there will be a problem that the iframe page cannot adapt.
After going through various Baidu and Google, I finally combined some methods on the Internet, and now it seems to be a perfect ending to this problem.
In fact, the method is very simple. Just use js to determine the client. If it is ios, it is to forcefully limit the width of the iframe page based on the obtained screen parameters.
The effect is as follows:
Before modification:
Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page

Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page

After modification:

Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page

Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page

Modification method:
1. Add an id to the

of each page embedded in the iframe, such as
2. Introduce jquery and add new js code:
var ua = navigator.userAgent.toLowerCase();
    var screenwidth = window.screen.width;
    if(!/iphone|ipad|ipod/.test(ua)){
        $("#iosiframe").attr("scrolling","auto");
    }else{
        $('#iosiframe').width(screenwidth + 'px');
    }

Note: You can also add the above code directly to layui.js. In the future, you only need to add the

Just specify the id.

To be honest, I can’t afford layuiadmin because it’s just for learning, so I can’t afford the genuine version. I just pulled the skin from the demo on the official website, so I have tested it myself and there is no problem. I will see if you find any other problems after testing it.

Related recommendations:

The iframe height of the parent page automatically adapts to the iframe height of the child page_html/css_WEB-ITnose

page It can adapt to the size of the mobile phone screen, and the pictures inside cannot be

The above is the detailed content of Introduction to the solution to the problem that the iframe version of layuiadmin cannot adapt to the ios system page. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn