iT邦幫忙

0

手機網頁自動放大導致圖層位置異常

  • 分享至 

  • xImage

網頁是很久前製作的,沒有RWD,客戶沒有預算重製RWD
在手機輸入input和textarea時,畫面會自動放大
而網頁放大後,顯示用的div浮動位置判斷會錯誤
出現的位置是未放大時的置中位置
導致執行流程中斷(客人找不到div按下一步)
請問能用js或css縮小畫面,或者讓div浮動位置顯示到放大後螢幕的中央
下面是原本調整位置的js

<SCRIPT LANGUAGE="JavaScript">
	function sc1(){
		var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var top = parseInt(document.getElementById("Javascript.Div1").style.top);
		if(scrollTop != top){
			document.getElementById("Javascript.Div1").style.top = scrollTop + (document.documentElement.clientHeight) / 2 - document.getElementById("Javascript.Div1").offsetHeight+'px'
		}
		document.getElementById("Javascript.Div1").style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth - document.getElementById("Javascript.Div1").offsetWidth) / 2+"px";
	}
</SCRIPT>
qpalzm iT邦新手 1 級 ‧ 2022-02-07 16:09:50 檢舉
@media screen 參考看看~~可以偵測螢幕大小 再去針對設定的畫面大小做設定應該可以達到你要的效果~
迷路 iT邦新手 2 級 ‧ 2022-02-07 17:23:04 檢舉
這個能調整寬度的置中,但是高度部分應該沒辦法對應調整
原本的程式會讓div出現在原始大小螢幕的中央
但是畫面放大導致div出現在螢幕外面(上方)
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2022-02-08 00:20:39
最佳解答

這我只能說比較偏向無解。
還是只能往RWD的做法去處理。

想要做到臨時性的處理。基本上也等於做半套RWD了。
且東改改西跑跑。你會更累。

客戶沒這預算就不要去管了。想要小修改基本很難辦到。

迷路 iT邦新手 2 級 ‧ 2022-02-09 08:14:19 檢舉

好吧
我用focus到div上的按鈕
讓畫面強制移動到div的位置

我要發表回答

立即登入回答