一般設計圖的寬度為750px，現在我們的目標就是將layoutviewport設置為750px；

layoutviewport受到兩個屬性的影響，width屬性我們之間設置為750，initial-scale縮放比例應該為idealviewport的寬度/750；

當我們未改變meta標簽屬性的時候，layoutviewport的值其實就是idealviewport的值，所以可以通過document.body.clientWidth或者window.innerWidth來獲取。

(function () {const width = document.body.clientWidth || window.innerWidthconst scale = width / 750const content = 'width=750, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', viewport-fit=cover'document.querySelector('meta[name="viewport"]').content = content })()

設置完成之后，layoutviewport在不同的設備中會始終保持為750px，我們開發時可以直接使用設計稿尺寸。

UI出圖的時候一般是有一個固定的寬度的，而我們實際的移動端設備的寬度卻都不太一樣，

但是如果頁面元素的縮放比例和頁面寬度的縮放比例一致，在不同尺寸的設備下我們網頁的效果也將會是一致的。

總結

以上是生活随笔為你收集整理的750px设计稿处理方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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