實(shí)現(xiàn)效果，如上圖。

?

首先，實(shí)現(xiàn)手機(jī)頁(yè)面在PC端預(yù)覽， 則先在網(wǎng)上找到一個(gè)手機(jī)的背景圖片，算好大概內(nèi)間距，用來(lái)放預(yù)覽的頁(yè)面，我這里是給手機(jī)預(yù)覽頁(yè)面的尺寸按iphone5的尺寸來(lái)的；

一個(gè)手機(jī)頁(yè)面在這里預(yù)覽，要通過(guò)<iframe>標(biāo)簽，左邊選擇不同的select選項(xiàng)，通過(guò)監(jiān)聽(tīng)select選項(xiàng)的值，在js中動(dòng)態(tài)改變iframe的src來(lái)實(shí)現(xiàn)；

因?yàn)橐獙?shí)現(xiàn)橫屏和豎屏的預(yù)覽，切記，千萬(wàn)不能在點(diǎn)擊橫屏的時(shí)候，把豎屏的頁(yè)面旋轉(zhuǎn)90度，這樣是沒(méi)有效果的，因?yàn)轭A(yù)覽頁(yè)面的本身還是豎屏的，只是頁(yè)面跟著一起旋轉(zhuǎn)了90度，要單獨(dú)另外寫(xiě)一個(gè)橫屏的box，寬度大于高度的，這樣當(dāng)預(yù)覽頁(yè)面識(shí)別到寬度大于高度，即按橫屏的效果展示；

我這里實(shí)現(xiàn)思路是把橫屏的div默認(rèn)display:none;默認(rèn)選擇豎屏的時(shí)候，就直接把豎屏的box下的iframe的url和橫屏模式下的iframe的url一起改變了，當(dāng)選擇橫屏的時(shí)候，展示橫屏的box，隱藏豎屏的box，但是事實(shí)是橫屏的此時(shí)不會(huì)展示頁(yè)面，而是空白，而在默認(rèn)選擇了橫屏的情況下，去切換其他頁(yè)面的時(shí)候，其他橫屏可以正常展示，我想原因是，box從display:none到展示出來(lái)，iframe沒(méi)有識(shí)別到應(yīng)該有的橫屏的寬度，所以最后改為了默認(rèn)把橫屏的opacity的透明度設(shè)為0,則切換的時(shí)候通過(guò)切換透明度來(lái)進(jìn)行展示，讓默認(rèn)直接把iframe的url可以渲染到對(duì)應(yīng)寬度的盒子中。橫屏與豎屏通過(guò)定位放在同一個(gè)位置即可。

更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的js和css实现手机横竖屏预览思路整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。