整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
期待你的關(guān)注和收藏 -
耳朵們要好好收藏
原文：Stephen Radford | 譯：程琳琳
新的iPhone X具有美觀的全屏顯示。但是，在瀏覽器的頂端有一個(gè)小小的缺口，在默認(rèn)情況下，橫屏查看網(wǎng)站時(shí)，會(huì)出現(xiàn)橫屏顯示問(wèn)題。
為了適應(yīng)iOS 11頂部缺口，默認(rèn)會(huì)將網(wǎng)站限制在屏幕上的“安全區(qū)域”內(nèi)。使得瀏覽大多數(shù)網(wǎng)站時(shí)，出現(xiàn)左右側(cè)出現(xiàn)白邊。
慶幸的是有兩個(gè)簡(jiǎn)單的解決思路。
一、背景色（background-color）
如果您的網(wǎng)站使用單一純色作為背景，那么最適合您的解決方案就是用background-color在您的body代碼上設(shè)置屬性。上面的網(wǎng)站案例，就會(huì)得出以下結(jié)果：
正如上圖所示：邊距保持不變，只填充背景顏色
viewport-fit
如果您更喜歡對(duì)設(shè)計(jì)進(jìn)行額外的控制，或者使用漸變或圖像作為背景，則只設(shè)置一個(gè) background-color可能還不可行。在最新版本的iOS中，Apple已經(jīng)在CSS Round Display Spec中添加了viewport-fit的描述符。
只需添加viewport-fit=cover到您的meta標(biāo)記，即可將您的網(wǎng)站擴(kuò)大到填補(bǔ)整個(gè)屏幕，而不僅僅是安全區(qū)域。
這樣使得上面的網(wǎng)站案例，得出以下結(jié)果：
顯然，現(xiàn)在需要開(kāi)發(fā)人員/設(shè)計(jì)師手動(dòng)調(diào)整來(lái)適應(yīng)屏幕的缺口。
safe-area-inset-*
為了處理可能需要的任何調(diào)整，iOS 11的Safari版本包含一些可以在使用時(shí)viewport-fit=cover使用的常量。
這可以被添加到margin，padding或諸如top、left一樣的絕對(duì)位置值。我將以下內(nèi)容添加到網(wǎng)站的主要容器中。
這完美解決了頁(yè)面上菜單和社交媒體圖標(biāo)位置問(wèn)題。
喜歡請(qǐng)點(diǎn)贊 分享朋友圈也是一種贊賞
G時(shí)代雖然現(xiàn)在消費(fèi)者用電腦逛淘寶的的機(jī)會(huì)越來(lái)越少，但是對(duì)于很多還想入淘的新賣(mài)家來(lái)說(shuō)，PC端裝修在他們心中也是至關(guān)重要，其實(shí)PC端首頁(yè)裝修常見(jiàn)的模塊無(wú)非就那幾個(gè)，店招，導(dǎo)航，輪播海報(bào)，優(yōu)惠券，全屏寬圖等，其中淘寶pc端全屏海報(bào)尺寸寬度1920px，高度隨意哈！
當(dāng)然很多KA商家玩的可能會(huì)玩得更花，尤其是在618、雙11這樣的大促期間，加上各種的特效，比如下雪，雪花、元寶、花瓣等，看著很炫酷，間接增加店鋪客戶粘度。
今天幫一個(gè)做工業(yè)設(shè)備的朋友裝修了一下PC端店鋪首頁(yè)，對(duì)于店招、輪播海報(bào)等這些網(wǎng)上教程有很多，沒(méi)太多技巧，就那個(gè)方法，我就不贅述了，下面來(lái)說(shuō)一下首頁(yè)裝修遇到的一個(gè)問(wèn)題就是全屏海報(bào)之前空白間隙的問(wèn)題，該如何去除呢？當(dāng)然網(wǎng)上也是有很多教程的，也有工具可以去除的，但是按照這種方法操作肯定能夠去除間隙。
很多首頁(yè)裝修的時(shí)候，全屏海報(bào)因?yàn)榭粗叨恕⒋髿狻⑸蠙n次，因此首頁(yè)裝修都是必不可少的，但是會(huì)出現(xiàn)海報(bào)與海報(bào)之前有空白間隙的問(wèn)題，這個(gè)空白間隙一般是20px,當(dāng)然，有很多美工裝修助手都是可以直接去掉這些空白間隙的，但是幾乎所有的裝修工具都是收費(fèi)的，那不借助這些收費(fèi)的工具該如何去除呢？(最后分享一個(gè)免費(fèi)的)
全屏海報(bào)的添加都是通過(guò)店鋪裝修后臺(tái)左側(cè)欄中基礎(chǔ)模塊中的自定義區(qū)模塊添加的，如果大家稍微知道一些div+css的知識(shí)，不借助工具直接在DW里面寫(xiě)的話一般都會(huì)避免出現(xiàn)海報(bào)與海報(bào)之間間隙的問(wèn)題。當(dāng)然如果添加完海報(bào)在預(yù)覽狀態(tài)下出現(xiàn)留白間隙的話，很多時(shí)候都是借助工具生產(chǎn)的代碼才會(huì)出現(xiàn)這種情況，出現(xiàn)白色間隙先返回裝修頁(yè)面點(diǎn)擊右上角 "裝修"，進(jìn)入自定義內(nèi)容區(qū)，顯示標(biāo)題處 選擇"不顯示"，然后點(diǎn)擊“源碼”，進(jìn)入源碼狀態(tài)，按下圖所示的1和2 兩個(gè)步驟操作修改源碼，可以完美去除海報(bào)之間的留白問(wèn)題。
當(dāng)然我截圖的代碼顯示的是我這邊height:710px, -20px 就是690px, 你的height是多少， 根據(jù)情況減20px就可以了。也就是說(shuō)1和2步驟都是要減掉白色間隙的20px.
其實(shí)經(jīng)常搞設(shè)計(jì)的美工，手里都會(huì)有幾個(gè)經(jīng)常用到的美工助手工具，而且網(wǎng)上有很多類(lèi)似 這樣的，免費(fèi)的功能幾乎都都能滿足日常需要，更會(huì)為設(shè)計(jì)師節(jié)省不少時(shí)間。在這里就不再分享了哈，以免被誤認(rèn)為有打廣告的嫌疑.
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
