js和css實現手機橫豎屏預覽思路整理


實現效果,如上圖。

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM