移动端页面开发的一些常用的设置

Posted 2020-10-03 たLOME

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端页面开发的一些常用的设置相关的知识，希望对你有一定的参考价值。

viewport 视口(可视区窗口)设置详解

当我们试图在iPhone中输出屏幕宽度的时候，会发现屏幕宽度是980，居然和pc屏幕宽度差不多大

苹果主导的这些手机厂商，为了使用户获得完整的WEB体验，很多设备都会欺骗浏览器返回一个数值较大的视口，告诉浏览器，别以为我身子小，但是我想以980px宽度显示这个页面（分辨率和视口没有关系（开发中根据视口来算的））

视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待，我们心中认为手机屏幕尺寸应该在320到400之间

默认不设置viewport一般可视区宽度在移动端是980，所有的手机响应式网站，都要加上meta viewport视口约束标记

解决这个问题只要约束视口即可：

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

一个id和name为 viewport的meta元标记，就表示现在要约束视口了

那么具体约束的规则写在content中，每个约束规则用逗号隔开：

width=device-width　　　　命令视口的宽度，变为设备的宽（以1024*768屏幕为标准 iPhone等手机通常为320到380之间），(number||device-width)

initial-scale=1.0　　　　　　命令视口默认的缩放等级为1（可以设置为任何数字，以倍数计算，ios10没效果）

minimum-scale=1.0　　　　命令视口最小缩放等级为1（可以设置为任何数字，以倍数计算，IOS10没效果）

maximum-scale=1.0　　　　命令视口最大缩放等级为1（可以设置为任何数字，以倍数计算，IOS10没效果）

user-scalable=no　　　　　　不允许用户缩放页面(yes||no)（可以设置为任何数字，以倍数计算，IOS10没效果）

其他的一些设置

强制横屏或者竖屏设置（X5内核的浏览器才支持）

可以设置为protrait（竖屏）和andscape（横屏）

<meta name="x5-orientation" content="portrait" />

设置全屏（X5内核有效）

<meta name="x5-fullscreen" content="true" />

UC浏览器强制竖屏或者横屏显示

可以设置为protrait（竖屏）和andscape（横屏）

<meta name="screen-orientation" content="portrait">

UC全屏显示

<meta name="full-screen" content="yes">

其他浏览器下如果要屏蔽横屏显示的功能，可以使用陀螺仪的方法来做，具体查看：移动端页面的陀螺仪操作这篇文章

<meta name="format-detection" content="telephone=no, email=no" />

禁止移动端电话号码和邮箱的识别

<meta name="format-detection" content="telephone=no, email=no" />

上面的设置是全局设置，如果说页面中有一个地方需要识别电话号码和邮箱那么可以使用下面这样设置

<a href="tel:18888888888">请拨打电话18888888888</a>
<a href="mailto:[email protected]">请发送邮件</a>

移动端页面开发常见的一些问题（开发之前需要先重置以下样式）

清除input，a，button等标签的点击阴影

在移动端input，a，button这三个标签点击的时候都会默认有阴影，那么怎么去掉或者替换其他的阴影样式呢，可以使用下面这个属性进行设置（下面是去除阴影）

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

<style>
    a,
    input,
    button{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
</style>
<body>
    <a href="http://miaov.com">妙味课堂-我是莫涛</a>
    <input type="button" value="按钮">
</body>

清除按钮的圆角

在移动端input和button这两个标签都会默认有圆角，可以使用下面两个样式去除

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

<style>
    a,
    input,
    button{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    input,
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }
</style>
<body>
    <a href="http://miaov.com">妙味课堂-我是莫涛</a>
    <input type="button" value="按钮">
</body>

选中文字设置（设置为不选中）

安卓不兼容这个属性，可以使用事件来兼容

-webkit-user-select: none;

禁止文字缩放

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

默认字体设置

因为移动端，每个手机默认的字体都不一样，所以需要重置一下，至于重置什么样的字体自己来定

font-family: Helvetica;

Font Boosting

在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了，解决办法:设置高度或者设置最大高度max-hieght

固定定位在移动端的问题

移动端IOS回弹的问题

IOS下overflow的问题

就是是说body下某个元素超过页面宽度后，即使body设置了overflow为hideen，在IOS下也没有用，解决办法就是将body下的所有子元素包裹在一个div上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%;
            overflow: hidden;
        }
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            position: relative;
        }
        .wrap {
            height: 100%;
            overflow: auto;
        }
        header {
            position: absolute;
            width: 200%;
            height: 40px;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            text-align: center;
        }
        section {
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>我是一个头部</header>
        <section>
            页面内容<br/>
        </section>
    </div>
</body>
</html>

以上是关于移动端页面开发的一些常用的设置的主要内容，如果未能解决你的问题，请参考以下文章