js和css实现手机横竖屏预览思路整理 程序员文章站 2022-04-09 13:48:43 实现效果，如上图。 首先，实现手机页面在PC端预览， 则先在网上找到一个手机的背景图片，算好大概内间距，用来放预览的页面，我这里是给手机预览页面的尺寸按iphone5的尺寸来的； 一个手机页面在这里预览，要通过标签，左边选择不同的select选项，通过监听select选项的值，在js ......</div> <div class="content"> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczMuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxODExMDIvYl8wXzIwMTgxMTAyMjE1MzA1NjI1My5qcGc=" alt="js和css实现手机横竖屏预览思路整理" title="js和css实现手机横竖屏预览思路整理"></p> <p>实现效果，如上图。</p> <p> </p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczMuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxODExMDIvYl8wXzIwMTgxMTAyMjE1MzA1MTQyNS5qcGc=" alt="js和css实现手机横竖屏预览思路整理" title="js和css实现手机横竖屏预览思路整理"></p> <p>首先，实现手机页面在pc端预览， 则先在网上找到一个手机的背景图片，算好大概内间距，用来放预览的页面，我这里是给手机预览页面的尺寸按iphone5的尺寸来的；</p> <p>一个手机页面在这里预览，要通过<iframe>标签，左边选择不同的select选项，通过监听select选项的值，在js中动态改变iframe的src来实现；</p> <p>因为要实现横屏和竖屏的预览，切记，千万不能在点击横屏的时候，把竖屏的页面旋转90度，这样是没有效果的，因为预览页面的本身还是竖屏的，只是页面跟着一起旋转了90度，要单独另外写一个横屏的box，宽度大于高度的，这样当预览页面识别到宽度大于高度，即按横屏的效果展示；</p> <p>我这里实现思路是把横屏的div默认display:none;默认选择竖屏的时候，就直接把竖屏的box下的iframe的url和横屏模式下的iframe的url一起改变了，当选择横屏的时候，展示横屏的box，隐藏竖屏的box，但是事实是横屏的此时不会展示页面，而是空白，而在默认选择了横屏的情况下，去切换其他页面的时候，其他横屏可以正常展示，我想原因是，box从display:none到展示出来，iframe没有识别到应该有的横屏的宽度，所以最后改为了默认把横屏的opacity的透明度设为0,则切换的时候通过切换透明度来进行展示，让默认直接把iframe的url可以渲染到对应宽度的盒子中。横屏与竖屏通过定位放在同一个位置即可。</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/522623.html"> Python使用matplotlib绘制三维图形示例 </a> </p> <p> 下一篇： <a href="/article/522625.html"> 经常遇到这样的糗事 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/1662917.html" target="_blank" title="js和css实现手机横竖屏预览思路整理"> <h2> js和css实现手机横竖屏预览思路整理 </h2> </a> </li> <li> <a href="/article/545797.html" target="_blank" title="如何用css和js移动端分别判断手机横竖屏的状态"> <h2> 如何用css和js移动端分别判断手机横竖屏的状态 </h2> </a> </li> <li> <a href="/article/522624.html" target="_blank" title="js和css实现手机横竖屏预览思路整理"> <h2> js和css实现手机横竖屏预览思路整理 </h2> </a> </li> <li> <a href="/article/201199.html" target="_blank" title="如何用css和js移动端分别判断手机横竖屏的状态"> <h2> 如何用css和js移动端分别判断手机横竖屏的状态 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>