时间:2023-09-24 13:30:01 | 来源:网站运营
时间:2023-09-24 13:30:01 来源:网站运营
我的移动端网页开发方案:开发移动端网页会遇到很多问题,缩放问题、屏幕的物理像素与实际像素、不同尺寸的屏幕、被延迟的点击事件、响应点击的元素出现灰色的背景、不灵敏的滚动事件、丑陋的1px线条、锁不死的滚动条等等吧。解决方法有很多,这里只会列出舒适的方案,不增加工作成本。 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
初始化缩放1,最大缩放1,最小缩放1,禁止用户缩放网页 <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点击的元素{ /*清除click延迟*/-ms-touch-action: manipulation;-webkit-touch-action: manipulation;touch-action: manipulation;-webkit-appearance:none; /*清除灰色背景*/}
overflow: hidden;height: 100%
在IOS下不起作用,必须html,body都设置才会起作用。::-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;}
关键词:方案,移动