前言
本文章針對h5開發的單頁全屏無滾動頁面。
解決方案
整體採用vw、vh作為基本單位，採用flex布局，針對字型使用rem單位。
多終端適配
const isweixin = () => ;
// android
const isandroid = () => ;
// ios
const isios = () => ;
橫豎屏切換
js作為瀏覽器執行語言，無法控制裝置的橫豎屏切換。我們可以做一些相容的處理。
首先，要監測出使用者切換了橫豎屏，檢測方法：
window.matchmedia
const checkmediaoritation = () => else
});};
window.addeventlistener("resize", () => else
});
給予使用者提示資訊，讓使用者保持其中一種模式操作
頁面整體旋轉，保持頁面布局不變
頁面自適應，出現滾動條
其中第1種和第3種比較好理解，第2種處理方式如下：
採用js控制transform方式整體rotate(-90deg)
// 以豎屏布局為主，適配橫屏
let h = window.innerheight, w = window.innerwidth;
if(h > w) else
let h = window.innerheight, w = window.innerwidth;
if(h > w) else
.rotate移動端h5頁面適配
一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了乙個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用於積累知識,如有問題,歡迎指正 先來看看很多資料上面的描述 它是物理概念，指的是裝置中使用的...
移動端H5頁面適配
廢話不多說，直接上 以下例子均以ui設計圖為750px寬度作為標準進行轉換 1.rem加js適配 用原生方法獲取使用者設定的瀏覽器的字型大小 相容ie 心。該醫院初期主要研究女性性反應方面問題，後逐漸將女性盆骨健康問題和如何提高性功能也作為院內主要診療專案。醫院憑藉精湛的手術技術和出色的手術效果，在...
h5頁面開發
相信大家在做h5頁面開發的時候，也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來，有需要的朋友可以參考一下。1.安卓瀏覽器看背景，有些裝置會模糊。同等比例的在pc端頁面和移動手機端頁面的解析度差很多，原因和devicepixelratio有關。手機解析度比pc端的解析度小，按照...