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
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:
After modification:
Modification method:
1. Add an id to the
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:
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!