175-2108-6175
网站建设资讯详细

Web APP开发技巧总结——HTML/CSS相关

日期:2020-04-05  作者:千语创想  浏览:6665

1、关闭iOS输入自动修正

IOS有一个功能就是默认输入法会开启自动修正输入内容,用户经常要进行两次操作。我们可以通过input标签属性来关闭掉:

 

<input type="text" autocorrect="off" />

 

2、关闭iOS键盘自动大写首字母

在iOS中,默认情况下键盘是开启首字母大写的功能的,如果想要关闭这个功能,可以这样设置:

<input type="text" autocapitalize="off" />

  

3、禁止文本缩放

当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:

html {

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

}

 

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

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

input,

textarea {

  border: 0; /* 方法1 */

  -webkit-appearance: none; /* 方法2 */

}

 

5、移动端禁止选中内容

如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:

 

.user-select-none {

  -webkit-user-select: none;  /* Chrome all / Safari all */

  -moz-user-select: none;     /* Firefox all (移动端不需要) */

  -ms-user-select: none;      /* IE 10+ */      

}

 

6、快速回弹滚动

在iOS上如果你想让一个元素拥有像Native的滚动效果,你可以这样操作:

.xxx {

    overflow: auto; /* auto | scroll */

    -webkit-overflow-scrolling: touch;

}

 

 

7、IOS如何禁止保存或拷贝图像

通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

img { -webkit-touch-callout: none; }

 

8、移动端取消touch高亮效果

在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:

html {

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

}

 

来千语创想移动应用开发平台学习更多APP开发知识:app开发app制作app开发源码下载app开发框架app制作模板等免费获取。千语创想支持APP定制开发,一键网站自动生成app网站转app网站封装app,有网站即可生成自己的app。

 

立即免费在线制作一个APP,新手注册即送开发大礼包

提交app定制需求,免费获取报价和周期:

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/quickaddcustom


转载请注明来自:https://www.qianyuthink.com/news/6358.html