h5頁面在移動端需要注意的一些事情

2022-09-02 04:57:12 字數 2114 閱讀 2132

h5頁面在移動端無法滿屏自適應視窗,怎麼辦?

h5頁面在移動端字型應該怎麼設定?

1.ios 系統

預設中文字型是heiti sc

預設英文本型是helvetica

預設數字字型是helveticaneue

無微軟雅黑字型

2.android 系統

預設中文字型是droidsansfallback

預設英文和數字字型是droid sans

無微軟雅黑字型 

3.winphone 系統

預設中文字型是dengxian(方正等線體)

預設英文和數字字型是segoe

無微軟雅黑字型

各個手機系統有自己的預設字型,且都不支援微軟雅黑,如無特殊需求,手機端無需定義中文字型,使用系統預設英文本型和數字字型可使用 helvetica ,三種系統都支援。

font-family:helvetica;

點選鏈結就可以撥打**,怎麼辦?

點選鏈結就可以傳送簡訊,怎麼辦?

咪咕閱讀客服簡訊

h5頁面的數字不想識別為**號碼,怎麼辦?

h5頁面想忽略android平台中對郵箱位址的識別,怎麼辦?

不想顯示webkit的滾動條,怎麼辦?

element::-webkit-scrollbar

h5頁面的內容想不被人選中,怎麼辦?

-webkit-user-select: none;user-select: none;

-webkit-touch-callout: none;

想取消ios裡button、input上的預設樣式,怎麼辦?

想在android裡h5頁面touch時沒有藍色的邊框與遮罩,怎麼辦?

-webkit-tap-highlight-color:rgba(0,0,0,0);

多張放置在一起,不想有4px的空隙,怎麼辦?

img;

img;

img 

想改變input裡placeholder屬性的樣式,怎麼辦?

::-webkit-input-placeholder

h5頁面input type=」num」時想去掉右邊的上下箭頭,怎麼辦?

h5頁面載入的太大了,怎麼辦?

在ios系統中鍵盤輸入時不想首字母為大寫,怎麼辦?

在ios系統中鍵盤輸入關閉自動修正,怎麼辦?

螢幕旋轉橫屏豎屏切換時,想禁止文字縮放,怎麼辦?

-webkit-text-size-adjust: 100%;

h5頁面想有快速回彈滾動的效果,怎麼辦?

overflow: auto; /* auto | scroll */

-webkit-overflow-scrolling: touch;

螢幕旋轉橫屏豎屏切換時想支援有不同的事件,怎麼辦?

事件window.orientation,取值:正負90表示橫屏模式、0和180表現為豎屏模式;

window.onorientationchange = function()

//橫屏時使用的樣式

@media all and (orientation:landscape)

在android 上想不顯示語音輸入按鈕,怎麼辦?

input::-webkit-input-speech-button

想開發h5搖一搖功能,怎麼辦?

html5 devicemotion:封裝了運動感測器資料的事件,可以獲取手機運動狀態下的運動加速度等資料。

移動端h5頁面適配

一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了乙個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用於積累知識,如有問題,歡迎指正 先來看看很多資料上面的描述 它是物理概念,指的是裝置中使用的...

移動端H5頁面適配

廢話不多說,直接上 以下例子均以ui設計圖為750px寬度作為標準進行轉換 1.rem加js適配 用原生方法獲取使用者設定的瀏覽器的字型大小 相容ie 心。該醫院初期主要研究女性性反應方面問題,後逐漸將女性盆骨健康問題和如何提高性功能也作為院內主要診療專案。醫院憑藉精湛的手術技術和出色的手術效果,在...

h5頁面的寫法 移動端h5頁面寫法

1.頁面寬度320,所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640,元素尺寸正常 暫未發現問題 3.頁面寬度640,js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...