實現效果，如上圖。

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