モバイル端末の基礎知識まとめ

1.単位（px、em、rem）

1.px：画面デバイスで物理的に表示できる最小のポイント。異なるデバイス上のポイントの長さと幅の比率は同じではない場合があります。 ;

2. em/rem: 似ている点: どちらも相対的なサイズ値です。異なる点: em は親要素に対して相対的であり、rem は html に対して相対的です (デフォルト値はブラウザーによって異なります。Chrome のデフォルトは 16px)。

レムユニットはモバイルフロントエンド開発で非常に人気があります。 rem ユニットには多くの利点があり、ルート ノードに関連しているため、Web サイト全体のユニットを統合できます。また、フォントを Web サイトのサイズに合わせて調整することもできます。ただし、使用するとわかるように、Chrome ブラウザーを使用して作成した Web サイトを開くと、フォントが大きく表示されることがあります。大きな状態。ただし、ページを更新してください。

このようなことが起こる理由は、計算の都合上、元々のデフォルトの 1rem=16px を 1rem=10px に変更したためです。そのため、通常は HTML で次の設定を行います:

html{
    font-size:62.5%;/*10÷16×100=62.5%   1rem=10px*/
}

しかし、Chrome ブラウザーは時々無視します。 HTML 設定に問題があるため、ページを初期化すると、上記のフォントが大きすぎるように見えます。よく調べると、フォントが大きすぎる「要素」には通常、フォント サイズが設定されていないことがわかります。したがって、解決策は次のとおりです。表示したいテキストまたはその他のフォント サイズ自体を設定します。

2. ヘッダー情報:

1.DOCTYPE (ドキュメント タイプ): このタグは、ドキュメントに使用する html または xhtml 仕様をブラウザーに指示します。大文字と小文字は区別されません。HTML コード:

nbsp;html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->

2.lang: この属性は、ドキュメントの言語タイプ (英語: en、中国語: zh など) を設定するために タグに配置されます。コード：

...

3.charser：ドキュメントの使用方法を宣言 文字エンコーディング（GBK、UTF-8）、HTMLコード：

<meta>

4.format-detection（識別ルール）→コンテンツパラメータ（デフォルトはyes） ):

電話: 番号はダイヤルアップ リンクに変換されます (はい/いいえ)—いいえ: 番号をダイヤルアップ リンクに変換することを無効にします、はい: 番号をダイヤルアップ リンクに変換することを有効にします

電子メール: 電子メールを識別します。はい/いいえ)——いいえ: メール アドレスとしての使用を無効にします。はい: テキストを有効にします。デフォルトはメール アドレスです。アドレス: アドレスをクリックして地図にジャンプします。いいえ: 地図へのジャンプを禁止します。はい:アドレスをクリックして地図にジャンプする機能を有効にします。

<meta>

5.viewport (モバイルデバイス用) → content パラメータ:

幅: ビューポートの幅: ビューポートの高さ (通常は設定されていません);スケール: 初期スケーリング率; 最大スケール: 最大スケーリング率; 最小スケール: 最小スケーリング率; ユーザースケーリング可能かどうか (はい/いいえ)

<meta>

6. SEO 最適化:

):

キーワード (ページのキーワード):

説明 (ページの説明):

Author (ウェブページ作成者):

ロボット (ウェブページ検索エンジンのインデックス作成方法): robotterms はカンマ (,) で区切られた一連の値、通常は次の値です。

なし: 検索エンジンはこの Web ページを無視します。noindex、nofollow と同等です。 noindex: 検索エンジンはこの Web ページをインデックスしません。 : 検索エンジンは、この Web ページのリンク インデックスを介して他の Web ページの検索を続行しません

すべて: 検索エンジンは、この Web ページのインデックスを作成し、この Web ページのインデックスを作成し続けます インデックスに相当するリンク インデックス

;

インデックス: 検索エンジンはこの Web ページのインデックスを作成します。フォロー: 検索エンジンはこの Web ページのリンク インデックスを通じて他の Web ページを検索し続けます。 2. ページを無視します。番号は電話として認識されます。番号 (iOS 端末で発生しやすい)

<meta>

3. ページ上のメールアドレスの認識を無視する (Android 端末で発生しやすい)

1.H5页面窗口自动调整到设备宽度，禁止用户缩放

4. スクロールバーを上下に引くと途切れる

<meta>

5.コピー禁止、テキストを選択

<meta>

6.長押しするとページがクラッシュします

<meta>

　　　7. IOS/Android触摸元素时出现半透明灰色遮罩

html{
    -webkit-tab-highlight-color:rgba(255,255,255,0);
}

　　　8. 伪类 :active失效

　　　　方法一：

　　　　方法二：js给document绑定 touchstart 或 touchend 事件      document.addEventListener(‘touchstart’,function(){},false);

　　　9. 降级处理(CSS3)

if('transition' in document.documentElement.style){
    console.log(‘支持transitioin’);
}else{//这里进行降级处理，调用不同的CSS
    console.log(‘不支持transition’);
}

　　　10.旋转屏幕时，调整字体大小

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
    -webkit-text-size-adjust:100%;
}

　　　11.某些Android圆角失效

background-clip:padding-box;

　　　12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)

document.getElementById('inputId').addEventListener('input',function(e){
    var e = e || event;// 浏览器兼容性处理
    var value = e.target.value;
    console.log(value);
});

　　　13.消除IE里面那个叉号

input:-ms-clear{
    display:none;
}

　　　14. IOS设备上输入框默认内阴影

html{
    -webkit-appearance:none;
}

　　　15.IOS设置input按钮样式会被默认样式覆盖

input,textarea{
    border:0;
    -webkit-appearance:none;
}

　　　16. IOS键盘字母输入，默认首字母大写

<input>

　　　17. input 类型 设置为 number 的问题：

　　　　17-1.maxlength属性用不了：<input>

function checkLength(obj,length){
    if(obj.value.length > length){
    　　obj.value = obj.value.substr(0,length);
    }
}

　　　　17-2.设置step(默认为1)：<input>

　　　　17-3.去除input默认样式

input[type=number]{
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

　　四.移动端事件(click点透)：

　　1.事件的变化：

　　　　① PC端的鼠标事件(失效)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave 

　　　　② 几个原始事件取代click点击事件(移动端click事件也存在，但会有一个200ms~300ms的触发延时问题)：

　　　　　　touchstart→触控开始时触发，类似于mousedown

　　　　　　touchmove→触控点在屏幕上移动时触发，类似于mousemove

　　　　　　　　在移动设备上，触控点从一个元素移动到另一个元素上时，不会像PC端一样触发类似mouseover、mouseout、mouseenter、mouseleave等事件

　　　　　　touchend→触控结束时触发，类似于mouseup

　　　　　　touchcancel→更高级别的事情发生时触发，比如在游戏中突然来电话，就会触发touchcancel事件，并且在touchcancel时保存当前游戏的状态信息

　　　　③ PC端一台机器只有一个鼠标，与鼠标相关的属性都放到了一个event对象上；

　　　　　移动端设备大多支持多点触控，一个事件可能与多个触控点相关，每个触控点都需要记录自己单独的属性，与touch相关的属性都是TouchList类型，触控位置、目标元素，全部放到了touch对象上；

　　　　　 touches→当前屏幕的手指列表；changedTouches→触发当前事件的手指列表；targetTouches→当前元素上的手指列表；

 　　　　　touch对象主要属性：

　　　　　　clientX  /  clientY→触控点相对浏览器窗口的位置；pageX  / pageY→触控点相对页面的位置；screenX  /  screenY→触控点相对屏幕的位置；

　　　　　　identifier→touch对象的ID；target→当前的DOM元素 ， 该属性是触控事件最先发生的元素

　　　2.click点透事件：

　　　　① 什么是click点透 ：举个例子，现有A(上)、B(下)两个盒子重叠排列，盒子A有绑定touchend事件，事件处理为隐藏盒子A，盒子B有绑定click事件，此时点击盒子A一次，也会触发到盒子B的click事件

　　　　② 点透出现的场景 ：A / B两个元素层上下Z轴重叠，上层的A元素点击后消失或移开，下层的B元素有默认的click事件(如a标签)，或 B元素绑定了click事件

　　　　③ 为什么会出现点透 ：移动端click事件有明显的延迟，touchstart和click的区别：

　　　　　　touchstart：这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发；

　　　　　　click： 这个DOM(或冒泡到这个DOM)上手指触摸开始，且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值)，

　　　　　　　　　且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间，也会触发click)才能触发；

　　　　④ 如何解决 ：

　　　　　　对于B元素本身没有默认click事件的情况，应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件；

　　　　　　对于B元素本身存在默认click事件的情况,应及时取消B元素的默认点击事件，从而阻止click事件的产生，即应在 touch函数中取消事件的默认动作：

if(e.type == "touchend"){
    e.preventDefault();//取消事件的默认动作(如果存在这样的动作)
}

好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！

以上がモバイル端末の基礎知識まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。