移动端h5开发总结不断更新中....

最新推荐文章于 2022-02-08 16:41:59 发布

jdk137

最新推荐文章于 2022-02-08 16:41:59 发布

阅读量274

点赞数

分类专栏： js 文章标签：移动h5开发

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了移动端网页开发中常用的适配技巧，包括视口设置、响应式布局、去除默认样式等，确保页面在不同尺寸的手机屏幕上都能良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

from: https://segmentfault.com/a/1190000009326763

一.手机端开发页面必须要加一段代码：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

注：这段代码的主要意思是：让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。

二.为自己的页面设置最大宽度和最小宽度：


 {
     max-width:640px;
     min-width:320px;
 }
 主要作用是在屏幕足够大的时候，页面也不会失真。

三.兼容手机屏幕大小不同的情况：


  window.onload=window.onresize=function(){
         document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';
  };
  在写移动端页面的时候要加上这一段代码，这段代码意思是：让视口或者说页面的可见宽度与根元素的字符大小产生对应关系，例如上面这段代码意思是在视口宽度为640px的时候，让根元素的字符大        小为40px（也就是1rem等于40px），这样在视口不断变化的时候，根元素的字符大小也会不断变化，而且有固定的系数（1/16），这样就产生了对应关系，也就是兼容了不同屏幕大小不一样的情况。

具体用法：引用上述js代码，在设计图640px的情况下测量距离，然后在把距离除以40，并把px为rem，这样就可以了，注：js里的40和640可以根据需要灵活更改，但要注意字符默认情况下最小为12px且widow.onload在只能出现一次。

四.去掉 a，input 在移动端浏览器中的默认样式


1.禁止 a 标签背景
    在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下：
    a,button,input,optgroup,select,textarea {
       -webkit-tap-highlight-color:rgba(0,0,0,0); 
     }
     
2.禁止长按 a，img 标签长按出现菜单栏
    使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下
    a, img {
       -webkit-touch-callout: none; 
     }
     
3.流畅滚动
    body{
     -webkit-overflow-scrolling:touch;
    }
    
4.修改webkit表单输入框placeholder的样式
   input::-webkit-input-placeholder{color:#AAAAAA;}
   input:focus::-webkit-input-placeholder{color:#EEEEEE;}
   
5.禁止ios和android用户选中文字
  .css{-webkit-user-select:none}

五. 其他
1.手机拍照和上传图片

 <!-- 选择照片 -->
 <input type=file accept="image/*">
 <!-- 选择视频 -->
 <input type=file accept="video/*">

2.取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

3.打电话和发短信

 <a href="tel:0755-10086">打电话给:0755-10086</a>
 <a href="sms:10086">发短信给: 10086</a>

viewport模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">  <!--当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">  <!--将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式-->
<meta content="telephone=no" name="format-detection">  <!-- 禁止将页面中的数字识别为电话号码-->
<meta content="email=no" name="format-detection">   <!--忽略Android平台中对邮箱地址的识别-->
<title>title</title>
<link rel="stylesheet" href="index.css">
</head>

Ios 中文输入法不触发模糊搜索, 还需要打一下空格，原因是 jquery绑定 keyup事件不够，需要再绑 input事件。

手机固定屏幕大小，防止输入框弹框弹出后，改变了页面vh样式大小。

  // https://stackoverflow.com/questions/32963400/android-keyboard-shrinking-the-viewport-and-elements-using-unit-vh-in-css
  // prevent keyboard shrink vh
  setTimeout(function () {
        let viewheight = $(window).height();
        let viewwidth = $(window).width();
        let viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0, maximum-scale=1, user-scalable=no");
    }, 300);