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

Posted た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>

 

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

移动端开发的一些技巧

移动端开发的一些技巧总结

移动端H5开发常用技巧总结

移动Web开发基础

移动端开发需要注意的一些东西

移动web端页面设置的特殊样式列举