js和css实现手机横竖屏预览思路整理

2018-11-02 08:49:41来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

实现效果,如上图。

 

首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的;

一个手机页面在这里预览,要通过<iframe>标签,左边选择不同的select选项,通过监听select选项的值,在js中动态改变iframe的src来实现;

因为要实现横屏和竖屏的预览,切记,千万不能在点击横屏的时候,把竖屏的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖屏的,只是页面跟着一起旋转了90度,要单独另外写一个横屏的box,宽度大于高度的,这样当预览页面识别到宽度大于高度,即按横屏的效果展示;

我这里实现思路是把横屏的div默认display:none;默认选择竖屏的时候,就直接把竖屏的box下的iframe的url和横屏模式下的iframe的url一起改变了,当选择横屏的时候,展示横屏的box,隐藏竖屏的box,但是事实是横屏的此时不会展示页面,而是空白,而在默认选择了横屏的情况下,去切换其他页面的时候,其他横屏可以正常展示,我想原因是,box从display:none到展示出来,iframe没有识别到应该有的横屏的宽度,所以最后改为了默认把横屏的opacity的透明度设为0,则切换的时候通过切换透明度来进行展示,让默认直接把iframe的url可以渲染到对应宽度的盒子中。横屏与竖屏通过定位放在同一个位置即可。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:判断机型是否为iphoneX

下一篇:js-JavaScript的简介