记录手机端h5页面碰到的一些问题

cheukyin 发布于2019-08-02 10:04 / 2282人阅读

摘要：关于光标在手机端偏移问题根本不要使用垂直居中。解决方法可直接定义，然后高度由上下值撑开。

关于input光标在手机端偏移

问题根本：不要使用line-height垂直居中。
解决方法：可直接定义height，然后高度由上下padding值撑开。

移动端清除input光标

ios input 添加 readonly unselectable=”on” 属性，光标依旧还在

input聚焦时马上让它失焦，代码

$("input[readonly]").on("focus", function() {
    $(this).trigger("blur");
});

亲测在苹果手机可行

div不知道高宽的情况下居中

支持微信浏览器的translate写法其他浏览器需要加上-ms- -moz- -webkit- -o-

.parentDiv{
  position:relative;
}
.childDiv{
  width:100px;
  height:100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

手机端弹框背景的透明黑底背景样式

.maskin{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

css实现单行、多行显示省略号

//单行
div{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

css实现图片正方形加载

在vue中可以使用内联样式循环img :style="{backgroundImage: "url("+ img +")"}"

url-div {
   width:100px;
   height:100px;
   background-image: url();
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}

移动端1px问题

.border-1px {
    position: relative;
}
.border-1px:after {
    position: absolute;
    content: "";
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-bottom: 1px solid #666;
}

移动端字体设置

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;

}

移动端meta设置

碰到问题还会记录

GPU云服务器云服务器 java自学碰到一些困难服务器巡检碰到的问题手机端webrtc h5 手机端页面html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52102.html

记录手机端h5页面碰到的一些问题

摘要：关于光标在手机端偏移问题根本不要使用垂直居中。解决方法可直接定义，然后高度由上下值撑开。关于input光标在手机端偏移问题根本：不要使用line-height垂直居中。解决方法：可直接定义height，然后高度由上下padding值撑开。移动端清除input光标 ios input 添加 readonly unselectable=on 属性，光标依旧还在 input聚焦时马上...

hearaway 2019-08-30 14:19 评论0 收藏0
Hybrid APP架构设计思路

摘要：本文将从以下几个方面阐述架构设计的一些经验和思考。原文及讨论请到通讯作为一种跨语言开发模式，通讯层是架构首先应该考虑和设计的，往后所有的逻辑都是基于通讯层展开。关于Hybrid模式开发app的好处，网络上已有很多文章阐述了，这里不展开。本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考。原文及讨论请到 github issue 通讯作为一种跨语言开发模式，通讯...

hiyayiji 2019-08-19 17:19 评论0 收藏0
wap html5播放器和直播开发小结

摘要：此文已由作者吴家联授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。播放器的设计思路重构后应该包含这些功能支持点播非加密的和直播播放兼容适配移动端根据平台自动选择使用还是。直播的一些特点直播状态的判断。此文已由作者吴家联授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。去年年中的时候，借着产品改版的机会，将之前的h5播放器好好整理重构了一番...

Miyang 2019-06-28 11:01 评论0 收藏0
关于移动端基础布局概念方式和常见问题总结 (不定时更新)

摘要：前言本来是打算写写怎么使用进行移动端的布局的然后前面还加些像素基本知识铺垫后面又加了些属性概念最后还来些常见布局问题和系统样式果然排版也是门高深学问这里有些自己写的有些看完之后总结出来的还有些别人那里搬来的顺带会送上飞机票告诉你们来源在哪前言本来是打算写写怎么使用 lib-flexible 进行移动端的布局的, 然后前面还加些像素基本知识铺垫, 后面又加了些 CSS 属性概念, 最...

chenjiang3 2019-08-30 15:44 评论0 收藏0