移动端

lowett 发布于2019-08-20 18:21 / 1410人阅读

摘要：纯，隐藏滚动条，保留鼠标滚动效果。中弹性拉伸的现象解决禁用那个层或者的事件的默认行为禁用音视频自动播放这个是苹果官方明确提出的，为了用户的利益。所以的浏览器依然是死角，不能做到自动播放。

只是一个文档总结，纯粹是喜欢SF的Markdown。

HTML

CSS

X轴上采用百分比

字体大小以及部分不能用百分比衡量者，采用REM单位

配置页面根font-size大小

(function ( doc, win ) {
    var win = window;
    var doc = win.document;
    var baseWidth = 640;
    var documentHTML = doc.documentElement;
    function setRootFont(){
    var docWidth = documentHTML.getBoundingClientRect().width;
    var scale = docWidth / baseWidth;
    if (docWidth > 640) {
    scale = 1;
    }
    var p = scale*100;
    documentHTML.style.fontSize = p + "px";
    }
    setRootFont();
    win.addEventListener("resize", setRootFont, false);
})( document, window );

表单

表单之 - 各个浏览器自带的样式

这个问题不仅是手机端还有PC端，张鑫旭大神有详解

表单之 - 输入框的光标大小

解决：注意排查line-height值，不要使用line-height垂直居中，用上下同padding值

表单之 - 去掉input和select的默认样式

/* input和select的默认样式取消 */
input,select{
    outline: transparent dotted;border: 0;background: #fff;
    -webkit-appearance : none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

/* input的placeholder修改，至于select下的option的字体颜色可以直接控制select的color属性 */
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc;font-size: 13px;
}
input:-moz-placeholder,textarea:-moz-placeholder {
    color: #ccc;font-size: 13px;
}
input::-moz-placeholder,textarea::-moz-placeholder {
    color: #ccc;font-size: 13px;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #ccc;font-size: 13px;
}

表单之 - 重写按钮的样式

CODEPEN

表单之 - iOS机型点击输入框页面会放大

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

滚动条

修改样式

&::-webkit-scrollbar {
  width: 4px
}
&::-webkit-scrollbar-track {
  border-radius: 4px
}
&::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1);
  border-radius: 6px
}

隐藏滚动条但是依然可以滚动

&::-webkit-scrollbar {
  display:none
}

但是上述仅用于 webkit 浏览器，其他浏览器见过一种思路是：在原有的 div外部套一层div，样式内写overflow：hidden; 使这个外部的div宽度小于内部出滚动条的div.内部div的样式为overflow-y:auto;overflow-x:hidden;。这样，内部div的滚动条就被隐藏起来了，但是，此时依然可以滚动。纯css，div隐藏滚动条，保留鼠标滚动效果。

iOS

iOS中弹性拉伸的现象

解决：禁用那个层或者body的touchstart事件的默认行为

// disabled touchstart event
document.addEventListener("touchstart",function(event){
    event.preventDefault();
}, false);

iOS禁用音视频自动播放

这个是苹果官方明确提出的，为了用户的利益。此处的iOS涵盖了（iPhone和iPad）

解决：这个其实不能根本上解决问题，只能借用微信环境下，微信的 js-sdk 来实现自动播放。所以iOS的Safari浏览器依然是死角，不能做到自动播放。

  wx.ready(() => {
    document.getElementById("audio").play();
  })

追加：遇见 touchstart 和 touchend 事件，在 touchstart 时触发音频 a，在 touchend 时触发音频 b，但是如果长按时间过长，会出现 b 不播放或者播放延迟的现象。原因是，音频资源没加载完成。

  // 预设 this 环境
  function preload() {
    wx.ready(() => {
      wx.getNetworkType({
        success: () => {
          this.a = new Audio("a.mp3");
          this.b = new Audio("b.mp3");
          this.a.loop = true;
          this.a.load();
          this.b.load();
        }
      });
    });
  }
  
  // touchstart and touchend
  function start() {
    this.a.play();
  }
  function end() {
    this.a.pause();
    this.b.play();
  }

iOS中DOM的onclick事件无效

解决：在该DOM上css上添加{cursor: pointer}

个例

Chrome浏览器默认最小字体是12px

解决：使用适配手机的缩放。（ transform: scale(...) translate(...) ）

CODEPEN DEMO

Safari无痕模式下不支持sessionStorage.setItem()

解决一：业务场景可使用全局变量处理

解决二：Safari Private browsing mode appears to support localStorage, but doesn"t

学习资料

使用Flexible实现手淘H5页面的终端适配

前端页面布局常见问题/已踩过的坑大杂烩

——好记性不如烂笔头

GPU云服务器云服务器移动端海外移动端移动端推送移动端框架

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

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

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

CoreDump 2019-08-23 13:46 评论0 收藏0
移动端用户体验（UE）优化历程

摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。前言项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...

Bowman_han 2019-08-02 16:04 评论0 收藏0
移动端用户体验（UE）优化历程

摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。前言项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...

0xE7A38A 2019-08-29 16:39 评论0 收藏0
移动端用户体验（UE）优化历程

摘要：需求由于某企业对该产品的使用逐渐增加的手机端，而浏览较少，而该系统针对多是端，移动端可以说毫无用户体验，现对移动端进行逐步优化移动端用户体验。将原组件形成的树形多选控件，转换为移动端。前言项目是用sap的BI智能决策分析系统，java运用spring+springMVC+hibernate，数据库运用了sap企业的HANA内存数据库。前端技术采用bootstrap+datetime...

Brenner 2019-08-23 11:45 评论0 收藏0
移动端自适应布局方案

摘要：背景现在工作中有超过一半的时间用于移动端项目的开发，包括嵌入页，微信页面和移动页。经过研究，我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位，布局是一个流行的解决移动端响应式布局的方案。背景现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...

zacklee 2019-08-26 11:50 评论0 收藏0