>

手提式无线电话机端样式调用适配web端的代码,

- 编辑:澳门新葡亰平台游戏 -

手提式无线电话机端样式调用适配web端的代码,

论如何在手机端web前端实现自定义原生控件的样式

2015/10/30 · HTML5 · 原生控件

原文出处: 卖烧烤夫斯基   

手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式。首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样:

android:

图片 1

ios:

图片 2

方案1
注意一点: 貌似大漠今年(17)年推荐使用vhvw进行适配了。
https://github.com/amfe/lib-flexible/issues/154
方案2
大漠 使用Flexible实现手淘H5页面的终端适配
文章地址:
https://github.com/amfe/article/issues/17
参阅了大漠的文章
除了大段文字使用px来书写,其余基本使用rem 进行Flexible进行布局
由于现在一部分浏览器不支持 vw,所以我现在使用的是 master 的分支 版本0.3.2

web移动端前端构建(含样式布局,纯净版不含其它样式框架),web样式

@charset 'utf-8';
*{margin:0;padding:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:none; } /* highlight equal to outline,only dose it has a effect in google chrome lite browser */
*:focus,*:active {outline:none;}
html, body {  height:100%;}
body{ width: 100%;font-family: 5FAE8F6F96C59ED1,5B8B4F53;-webkit-user-select:none;}
p,a,span,textarea,b,input,dt,dd { color: #666;font-size: 0.9rem;}
ul, ol{list-style:none;}
img{border:none;}
a { text-decoration:none;}
textarea {resize:none;}
input[type=button],button{text-align: center; background: none; border: 0; outline: none; }
input { background: white; border: none; outline: none;}

/*占位符颜色*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#ccc; }
input:-moz-placeholder, textarea:-moz-placeholder { color:#ccc; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc; }

/* 浮动 */
.fl { float: left !important; }
.fr { float: right !important; }
.clear { clear: both; }

/* 功能 */
.hide { display:none !important; }/*隐藏*/
.ellipsis { overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } /* 字数省略 */
.keep { position:fixed !important;border-bottom: #ccc 1px solid !important; } /*滚动保持*/
.mask {display: none;position: fixed;left: 0;z-index: 11;width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.4);}/*遮罩层*/

/* 效果 */
.shadow,.all-shadow * {box-shadow: 0 0 .3rem #ddd !important;}
.gradient,.all-gradient * {background: -webkit-linear-gradient(top, #fff4f4,#fff);}
.radius,.all-radius * { border-radius: .2em;}
.left-radius {border-top-left-radius: .2em;border-bottom-left-radius: .2em;}
.right-radius {border-top-right-radius: .2em;border-bottom-right-radius: .2em;}
.top-radius {border-top-left-radius: .2em;border-top-right-radius: .2em;}


/* ---------------------------------- 主题A开始 ---------------------------------- */
/* 母版样式 */
.app{display:table;width:100%;height:100%;}
.app>* { display: table-row;  }
.app>:nth-child(2) { width: 100%;height:100%; }
.app>:first-child,.header{top:0; width: 100%;height: 2.5rem;line-height:2.5rem;}
.app>:last-child,.footer{ bottom:0;width: 100%; /*height: 4rem;*/}/*height:无定义高度,当需要页脚时可在当前页定义页脚,并添加标签<div class="footer"></div>即可*/
.header,.footer{ position:fixed;display:table;}
.header>*{display:table-cell;font-size:1rem;color:white;}

.A-color{ color: #00c1d9 }
.A-color-gray {color: #ccc}
.A-color-error { color: #ff8181 }
.A-color-success { color:green }
.A-color-disabled { color: #999 }

.A-border { border-color: #ccc }
.A-border-top{ border-top:1px solid #ccc}
.A-border-bottom {border-bottom:1px solid #ccc }
.A-border-left { border-left:1px solid #ccc  }
.A-border-right{ border-right:1px solid #ccc }

.A-bg {background-color:#00c1d9 !important } /* 主题点击效果 */
.A-bg-body { background-color: #d9d9d9; } /* 主题body背景 */
.A-bg-bar {background-color:#e6e6e6 !important } /* 主题点击效果 */

.A-icon-filter{ background: url(/Image/Ico/filter.png) center no-repeat;background-size:1.4rem;}
.A-icon-user{ background: url(/Image/Ico/user.png) center no-repeat;background-size:1.4rem;}
.A-icon-arrow-down{ background: url(/Image/Ico/arrow_down.png) 1rem center no-repeat;background-size:.8rem .4rem;}

.A-btn-all,.A-btn {} /* 主题按钮 */
.A-btn-click {background-color:#00b5cb !important } /* 主题点击效果 */
/* ---------------------------------- 主题A结束 ---------------------------------- */

asp.net 母版页:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Css")
    @RenderSection("css", false)
</head>
<body>
<div class="app">
    <div></div>
    <div>@RenderBody()</div>
    <div></div>
</div>
@Scripts.Render("~/Js")
@RenderSection("js", required: false)
</body>
</html>

asp.net 首页:

@{
    ViewBag.Title = "首页";
}
@section css
{
    <style>
        .app > :last-child, .footer { height:2.5rem }
        .city-btn { width: 5.5rem;text-indent:2.3rem; }
        .filter-btn,.user-btn{ width:3.2rem;}        
    </style>
}
<div class="header A-bg">
    <a class="city-btn A-icon-arrow-down A-btn"></a>
    <h1></h1>
    <a class="filter-btn A-icon-filter A-btn"></a>
    <a class="user-btn A-icon-user A-btn"></a>
</div>
<div class="body">
     //...
</div>
<div class="footer A-bg"></div>
@section js
{
    <script>
        //...
    </script>
}

显示结果:

图片 3

@charset 'utf-8';* { margin : 0 ; padding : 0 ; -moz-box-sizing : border-box ; -webkit...

无奈的选择

看完了这些丑陋的界面元素,我们就可以理解当我们把他们暴露在产品同学的眼中时,那种层层的杀气了。可以看到,界面元素十分丑陋,产品兄弟是肯定不会接受的。但是,不得不说这些控件在触发后的效果比pc机上的要炫酷。这其中以apple机的滚筒选择最为出色.以下是它们触发后调用原生控件的效果:

android:

图片 4图片 5图片 6

ios:

图片 7图片 8图片 9

不得不说这些样式原生弹出样式是符合我们设计的原则的,因为它即体现了UI界面的友好和体验度,又不损耗任何web性能,关键是我们什么都不需要做。产品BZJ君看到了,指明要在apple机下要滚筒的效果用来选择日期或者下来单。如果我们不能解决掉界面文本框的样式问题,那么无论后面的效果多炫酷,始终使无法让人接受的。也许你会想花时间写类似的效果?我不否认你可以写出来,但是需要多少时间的工作量呢?也很多人选择了插件的方式。通过jq插件(如果你的项目中没在使用jq,为了这个效果无奈下载jq和其插件)来实现,其实是非常吃力不讨好的事情。一个是插件这种东西出了问题或者变换了需求后它会变得异常的不好扩展,第二个当然是考虑到资源加载,在手机端尤其需要考虑。因此,选择插件是下下策!

几个的概念定义:

解决方法

问题来了,既想要弹出层的炫酷效果,又想自定义控件在界面显示的样式。怎么办呢?露珠曾经尝试过最简单的方法去重写css去改变它们的样式,但是即使在google若干小时,也没有找到满意的结果。露珠也尝试过-webkit-appearance属性,但它也显得不尽如人意。况且我们还需要兼容多机型(安卓,苹果,wp?)。无论如何,走改变原始样式的路是行不通的。露珠经过一番思考,找到了自认为非常好的解决方法,也是这篇博文的主题:既然控件在页面的样式不可以改变,那就隐藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,我们希望的是看不到它们的原始样式,而希望保留对它们的tap和focus事件。但是除了以上的方法,还有什么能使它们看不见呢?聪明的你一定想到了,对,就是opacit:0, 通过将控件的不透明度设置为0,我们可以让元素继续让它留在界面上,并且保持随时响应focus事件的状态。我们要做的,是为该控件设置为绝对定位,覆盖在我们自定义样式的一个element上。这样,用户看到的是底下的element,但当他的手去触碰此element时,他实际触碰的是完全透明确留在界面上的原生控件!如下图所示:

图片 10

这还是第一步,接下来我们需要为控件绑定响应事件,大多数情况下我们需要绑定的事件都是onchange,一旦选择完成,就把值复制到自定义的element上去。这样大功告成了!不管你是通过表单或者post提交,你取到的值依然是控件的值,自定义的element只负责显示,不负责业务!

图片 11

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示物理单元,在操作系统的调度下,每一个设备都有自己的颜色值和亮度值。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

图片 12

image.png

代码实现

XHTML

<html> <head> <style> body{ position: relative; } .front { position: absolute; opacity: 0; height: 30px; width: 180px; } .back { height: 30px; width: 386px; border: 1px dashed #19a39e; line-height: 30px; text-align: center; font-size: 11px; } </style> </head> <body> <input type="date" onchange="document.getElementsByClassName('back')[0].innerHTML = this.value;"> <div class="back">我是自定义element,我上面覆盖着一层看不见的input</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
   <head>
       <style>
           body{
               position: relative;
           }
           .front {
               position: absolute;
               opacity: 0;
               height: 30px;
               width: 180px;
           }
           .back {
                height: 30px;
                width: 386px;
                border: 1px dashed #19a39e;
                line-height: 30px;
                text-align: center;
                font-size: 11px;
           }
       </style>
   </head>
    <body>
        <input type="date" onchange="document.getElementsByClassName('back')[0].innerHTML = this.value;">
        <div class="back">我是自定义element,我上面覆盖着一层看不见的input</div>
    </body>
</html>

 

设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

结束语

产品B君看到了丑陋的东西消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得不错。这篇博文也不仅仅是关于解决控件样式的问题,在其他类似的情况下,用遮罩层的方法掩盖你无能为力的地方是值得借鉴的。其实在开发中类似的的小花招很多,只要找到了诀窍和方法,一行代码抵得上一万行代码(借用刘震云的小说名)。虽然是个很小的小花招,大篇幅的用一篇博客来讲解是过于夸张和繁琐,不过前端开发事无巨细,希望对遇到类似问题或者将来需要解决的同学有帮助。

1 赞 收藏 评论

图片 13

CSS像素

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。

设备像素比(device pixel ratio)

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

设备像素比 = 物理像素 / 设备独立像素

在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

视窗 viewport

简单的理解,viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。

移动端的viewport太窄,为了能更好为CSS布局服务,所以提供了两个viewport:虚拟的viewportvisualviewport和布局的viewportlayoutviewport。

下面这个是个人理解,有错误的话请指正,谢谢。
viewportvisualviewport: 就是你在移动端设备屏幕上看到的视窗,个人感觉就是屏幕的大小。
viewportlayoutviewport:就是整个网页的展示的窗口大小。

===============

个人认为,下面这个meta 需要谨慎的加,加个下面这个meta
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大。
加了上面这个meta后,手淘方案就不能缩放Web 页面的整个页面。
这个meta 加载到html后的意思是:

user-scalable=no:  用户不能交互。
initial-scale=1:  网页初始的缩放比为1,就是设备和viewportlayoutviewport (网页的窗口大小)的比例是一样的。
maximum-scale=1: 就是最大缩放为1。
minimum-scale=1: 就是最小缩放为1。

在没有加 viewportmeta 的情况下: 
个人在iPhonePlus设备上: 
查看网页源码,

图片 14

image.png

有图上可以看出来,手淘方案自动给我们加上了vieportmeta的标签。

使用手淘方案时,推荐大段文字使用px来写,

 @mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

scale=1的情况下,在iPhone6上的手淘方案就不会使用 使用[data-dpr="2"]的样式。

scale=0.5的情况下,在iPhone6上的每个设备独立像素点实际展示的是css中2px * 2px 的度量网页内容。

12pxscale=1的组合与24pxscale=0.5的组合实际展示的效果占据的设备独立像素是一样的,肉眼看上去基本看不出差别。

个人使用手淘的方案后,网页的字体展示效美观多了。因为前36氪的一位设计师给我说过,前端程序员还原UI时,字体的样式还原是最重要的,所以要使用手淘推荐的大段字体最好使用px方案。在使用rem布局时,字体很可能出现奇葩的字体大小,如 15px

本文由前端php发布,转载请注明来源:手提式无线电话机端样式调用适配web端的代码,