15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 我的移动端网页开发方案

我的移动端网页开发方案

时间:2023-09-24 13:30:01 | 来源:网站运营

时间:2023-09-24 13:30:01 来源:网站运营

我的移动端网页开发方案:开发移动端网页会遇到很多问题,缩放问题、屏幕的物理像素与实际像素、不同尺寸的屏幕、被延迟的点击事件、响应点击的元素出现灰色的背景、不灵敏的滚动事件、丑陋的1px线条、锁不死的滚动条等等吧。解决方法有很多,这里只会列出舒适的方案,不增加工作成本。




缩放问题

网页在移动端浏览器可以进行缩放,默认元素,字体会非常小,一个屏幕会看不到整个页面,需要左右看完整的页面。方案:在header标签下添加

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">初始化缩放1,最大缩放1,最小缩放1,禁止用户缩放网页

物理像素和实际像素

手机有普通屏,双倍屏,三倍屏。双倍屏,三倍屏呈现网页会出现1px线条会变粗。网页中最小字体大小是12px。如果视觉稿上出现11px的字体,无法还原视觉稿。

理论上说写1px到双倍屏上会用两个像素显示,三倍屏上会用三个像素显示,视觉上会变清晰,不知道为什么对于1px的线条并没有变清晰,而是变粗了,变难看了。

一般UED出的视觉稿是按照双倍屏出的,视觉的宽度会是实际手机宽度的2倍,给前端带来麻烦,需要先计算除以2,再写布局。




方案:

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">初始化缩放.5,最大缩放.5,最小缩放.5

无论在双倍屏,三倍屏下1px完美显示,视觉切图也不需要做除以2计算,直接写视觉稿上的像素就可以,11px的字体在视觉上是22px,自然超过最小限制。


scale=0.5和scale=1 1px像素对比


粗的是scale=1细的是scale=0.5 ;IphoneX手机

不同尺寸的屏幕

很多人会用rem的方案,在宽的屏幕下变大,窄的屏幕下变小,就好像网页缩放一样的效果。但自适应不同尺寸的屏幕并不是网页简单的缩放。

跟UED沟通的方案是:

  1. 高度不变宽度自适应
  2. 字体大小不变
  3. 间距固定
  4. 特殊场景特殊处理
网页布局就用不到rem了,好处就是不用做换算了,视觉上是什么手机上什么。宽度自适应用flex布局来做,经测试部分手机浏览器需要加(-webkit-)前缀来兼容。

被延迟的点击事件 & 灰色背景

给一个元素绑定click,点击事件响应慢,并且出现灰色背景。
无痛解决方案:

点击的元素{ /*清除click延迟*/-ms-touch-action: manipulation;-webkit-touch-action: manipulation;touch-action: manipulation;-webkit-appearance:none; /*清除灰色背景*/}


锁死滚动条

单纯的给body设置

overflow: hidden;height: 100%在IOS下不起作用,必须html,body都设置才会起作用。

不灵敏的滚动事件

我并没有完美的解决。body绑定onScroll事件,在IOS下不灵敏,window绑定onScroll事件,在一些杂牌浏览器上不灵敏。两害取其轻。




这里只想用一些无痛的解决方案,最好是浏览器本身可以解决的,通过样式,通过某个属性设置。人生苦短莫要太纠结,最后奉上我用的移动网页reset.css




::-ms-clear, ::-ms-reveal{display: none;}html { color:#000; background:#f1f1f1;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,form,th,td { margin:0; padding:0; font-weight: normal;}body{ background: #f1f1f1;}html { -webkit-overflow-scrolling: touch;}input::-webkit-search-decoration,input::-webkit-search-cancel-button { display: none;}body { -webkit-overflow-scrolling: touch;}input[type="search"]{-webkit-appearance:none;}a,input,button,i,li,div,span,em { -webkit-tap-highlight-color: rgba(255,255,255,0); -ms-touch-action: manipulation; -webkit-touch-action: manipulation; touch-action: manipulation; -webkit-appearance:none; outline: none; border:none;}body,button,input,select,textarea{ line-height: 1.5; color: #353535; outline: 0px; -webkit-appearance:none; font-size: 12px; font-family: sans-serif;}h1,h2,h3,h4,h5,h6 { font-size:100%;}address,cite,dfn,em,var { font-style:normal;}code,kbd,pre,samp,tt { line-height: 1.5; color: #353535; font-size: 12px; font-family: sans-serif;}small { font-size:12px;}ul,ol { list-style:none;}a { text-decoration:none; color: inherit;}a:hover { text-decoration:none; color: #316ccb;}abbr[title],acronym[title] { border-bottom:1px dotted; cursor:help;}q:before,q:after { content:'';}:focus { outline:0;}legend { color:#000;}fieldset,img { border:none;}button,input,select,textarea { font-size:100%;}table { border-collapse:collapse; border-spacing:0;}hr { border:none; height:1px; *color:#fff;}img { -ms-interpolation-mode:bicubic;}


上面这些足以在短时间内提高用户体验了。O(∩_∩)O~

关键词:方案,移动

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭