移动 Web 开发技巧

发布时间:2020-07-10 11:33:01 作者:VIP_web
来源:网络 阅读:318

最近一直有人问,移动端的页面怎么写啊?要注意什么啊?和PC页面有什么区别?……  就会有很多的疑问。其实要我回答这些问题可能也不知道怎么回答小伙伴。我也没有专门学习过移动端的制作,大部分都是工作后慢慢捉摸的。小月博客这几天会专门分享关于移动端的小技巧请多多关注哦


移动 Web 开发技巧

今天给大家分享一些移动端 web 开发的小技巧吧!

一、移动端手机号码的识别

在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别:

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

开启电话功能

<a href="tel:123456">123456</a>

开启短信功能:

<a href="sms:123456">123456</a>

二、移动端邮箱识别(Android)

与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:

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

同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

三、百度禁止转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:

<meta http-equiv="Cache-Control" content="no-siteapp" />

四、设置状态栏的背景颜色(IOS)

设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 参数:

五、移动端如何定义字体font-family

三大手机系统的字体:

ios 系统

android 系统

winphone 系统

各个手机系统有自己的默认字体,且都不支持微软雅黑 如无特殊需求,手机端无需定义中文字体,使用系统默认 英文字体和数字字体可使用 Helvetica ,三种系统都支持

* 移动端定义字体的代码 */

body{font-family:Helvetica;}

六、移动端字体单位font-size选择px还是rem

对于只需要适配手机设备,使用px即可

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考:

html {
    font-size:10px
}
@media screen and (min-width:480px) and (max-width:639px) { 
    html {  
         font-size: 15px 
    }
}
@media screen and (min-width:640px) and (max-width:719px) { 
    html {       
         font-size: 20px
   }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {    
      font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
  html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

七、移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

以下支持winphone 8

八、移动端如何清除输入框内阴影

在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

input,textarea {
  border: 0; /* 方法1 */
  -webkit-appearance: none; /* 方法2 */
}

今天就分享到这里了,这些小技巧在我们日常使用中非常有用。如果你在工作中遇到什么BUG 或者收获了什么好的经验技巧可以给我留言。


推荐阅读:
  1. 找回WordPress登录密码的方法
  2. PLSQL Developer软件使用大全

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

浏览器 手机 android

上一篇:如何在Spring boot实现@Value注解注入属性值

下一篇:API不是从业务抽象出来的(1):设计思维

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》