實現效果，如上圖。

?

首先，實現手機頁面在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可以渲染到對應寬度的盒子中。橫屏與豎屏通過定位放在同一個位置即可。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。