​1. iPhoneX的介紹 屏幕尺寸 我們熟知的iPhone系列開發尺寸概要如下： △ iPhone各機型的開發尺寸 轉化成我們熟知的像素尺寸： △ 每個機型的多維度尺寸 倍圖其實就是像素尺寸和開發尺寸的倍率關系，但這只是外在的表現。倍圖核心的影響因素在於PPI（DPI ...

前言 iPhone X和IOS 11的發布，不僅在許多技術方面造成了一定的沖擊，前端也不可以避免地也受到影響，因為iPhone X劉海的影響，在編寫前端頁面的時候要做一些處理，下面先提出一些新的概念。 iphone介紹 iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發生了較大 ...

1. iPhoneX的介紹 屏幕尺寸 我們熟知的iPhone系列開發尺寸概要如下： △ iPhone各機型的開發尺寸 轉化成我們熟知的像素尺寸： △ 每個機型的多維度尺寸 倍圖其實就是像素尺寸和開發尺寸的倍率關系，但這只是外在的表現。倍圖核心的影響因素在於PPI（DPI ...

前言 iPhoneX 取消了物理按鍵，改成底部小黑條，這一改動導致網頁出現了比較尷尬的屏幕適配問題。對於網頁而言，頂部（劉海部位）的適配問題瀏覽器已經做了處理，所以我們只需要關注底部與小黑條的適配問題即可（即常見的吸底導航、返回頂部等各種相對底部 fixed 定位的元素）。 筆者通過查閱了一些 ...

1.問題描述 適配的目標：在不同尺寸的手機設備上，頁面“相對性的達到合理的展示（自適應）”或者“保持統一效果的等比縮放（看起來差不多，但不是完全等比例，對於字體我們並不喜歡等比例的去放縮）”。 問題:手機設備的尺寸不同，讓頁面在不同的手機設備上顯示的效果看起來大致相同 ...

由於在iPhonex在狀態欄增加了24px的高度，對於通欄banner規范的內容區域會有遮擋情況。 解決方案：在頁面通欄banner頂部增加一層高度44px的黑色適配層，整個頁面往下挪44px，這種做法雖然不符合蘋果設計規范，可以先以這種方式處理，后續再優化banner設計展現。 對於底部 ...

一、js判斷， 給底部加padding適配。 $(document).ready(function () { 　　iphoneX(); 　　function iphoneX() { 　　　　var userAgent = navigator.userAgent; 　　　　var ios ...

1. viewport屬性及html頁面結構 <meta name= "viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 ...