移动互联网终端

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法 移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话定义了本页面的 viewport 的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的. 根据这篇文章 http://www.cnblogs.com/2050/p/3877280.html 的分析, 手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的,

详解移动端页面细线实现方案 特别提醒，本文写于2017-1-2，下面案例中出现的各大网站的实现方式随时有可能变化。 先说下本文要做什么：解析一些主流的移动端H5虚线方案。见下图： 很多注重用户体验的移动端web设计都会使用细线，在PC端也就是简单的一句： border-bottom: 1 px solid #e0e0e0 ; 在PC端web上只要简单的使用border-bottom属性去设置一条1px的细线就可以实现上图的效果。但是放到移动端，问题就大了。由于devicePixelRatio的存在，移动端永远无法使用border-bottom属性实现一个统一的1px细线。这个时候要去做一条细线就会需要很多技巧和经验。经验的第一条法则就是需要明确的就是没有一种万能的方法能够在所有移动设备上实现一致的细线体验，我们能做的就是尽量去写一种能够满足大部分移动设备细线呈现效果的样式，即使是大公司之间也纷纷采用不同的方案去实现。本文将针对几个较常见的案例来进行简要介绍细线实现的方式。 ·京东手机版虚线方案 案例一： 上图是京东手机版的一张网页布局截图，地址在这里： http://m.jd.com/ 。最右侧的样式代码看不清的话看下面： .bdr-bottom:after { height: 1px; content: ''; width: 100%; border-top: 1px solid

众所周知，在移动端1px比实际的1px的要粗，那么怎么才能在移动端实现1px的边框啦？？ 看到这里，不知道有没有童鞋想到css3的一个属性，缩放 ，没错，就是缩放 ！！ 还有一个重要那就是伪元素：：after 主要是css代码如下： .border::after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } 有疑问，请下方留言！！！ 来源： CSDN 作者： 吹过麦田的风 链接： https://blog.csdn.net/dq674362263/article/details/78411845

1像素边框问题 这个默认是移动端的问题了。由于移动端一般都会设置屏幕宽度为设备宽度， width=device-width,initial-scale=1 , 而有些屏幕是2倍屏，导致在移动端上设置 1px 就是看上去的 2px 。 解决方法： 通过 transform 将宽度缩小一半， transform:scaleY(0.5) 通过 @media 媒体查询，查询当前设置的屏幕倍率，统一设置 transform , 参考: 移动端(手机)1像素边框真正实现 模仿淘宝(不确定是不是来自淘宝的)，设置屏幕宽度为设计师的设计尺寸(一般为750)。 <meta name= "viewport" content= "width=750, user-scalable=no" > 由于移动端不同设备的dpr不同，所以1px边框的设计如下 dpr:物理像素与设备像素比 border-1px($color) position: relative &::after dispaly:block position:absolute left: 0 bottom:0//定位到元素下面 width:100%//相对于父元素是100%宽度 border-bottom:1px solid $color content:' 使用函数：函数所在位置 即为 函数中代码所在位置 以下针对不同dpr进行缩放 @media

本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。 物理像素(physical pixel) 物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（参照下文田字示意图理解）。 设备独立像素(device-independent pixel) 设备独立像素又被称为CSS像素，是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。 设备像素比(device pixel ratio)

1.html嵌入到第三方邮件系统中，很多h5标签、css3不支持。布局采用table+css。tabel表兼容性最好。css才用行内 可进行 tabel中嵌套div。例如： <table width="600" border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%"> <tbody> <tr> <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;"> <table width="100%" border="0" cellpadding="5" cellspacing="0" > <tbody> <tr> <td> <p style="margin:0;font-size:14px;line-height:24px;margin-bottom: 20px"> 　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的开发者： 　　　　　　　　　　　　　　　　　　　　　　　　</p> <p style="color:#000;margin:0;font-size:14px;line-height:24px;"> 　　

因为移动端都没有微软雅黑，没有宋体，在移动端的默认字体都是无衬线字体， 使用系统默认的字体所达到的视觉效果跟使用微软雅雅黑没有明显差别. /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 来源： CSDN 作者： 时间在飞飞 链接： https://blog.csdn.net/zhanghuanhuan1/article/details/80483673

最近在做移动端的网页，类似于web app的小应用。发现文字大小这块开始的时候不知道改怎么设定。查了网上的质料，发现有些用px单位，有些用em单位的，但是少部分用的是rem单位。 而我做的是使用jQUery mobile 框架来弄的。所以使用em作为单位。当然有时候在处理距离的时候还是用了px单位。也用了%单位，和em单位。 我大概认为的几点：如果是以这个文字大小的话，body{ font-size:62.5%;} ,那么 12px=1.2em; 1em=16px; 做移动端的话就不需要引入头部： 相反的，如果页面的头部引入了上面的，那么我认为设置字体大小为：body{ font-size:100%;} 然后针对p:1em; 等设置字体大小。但是可能会看到当屏幕分辨率变大的时候，想要字体也出现随着屏幕分辨率变大的话，那么就需要多媒体设置：如下： @media screen and (max-width:360px){body{font-size:12px}} @media screen and (min-width:360px){body{font-size:13px}} @media screen and (min-width:400px){body{font-size:15px}} @media screen and (min-width:480px){body{font

由于微信自带字体放大功能，因此基于微信的页面都可以通过微信进行字体放大，但是有些情况下这并不是我们想要的，因为很多移动端页面的开发都是使用rem作为单位的，当使用微信进行字体放大是，会导致页面的整体布局乱掉的情况出现，这对用户体验来说是极其不友好的，我们希望能够禁止微信的字体放大功能，下面我通过查找资料找到的一些解决方法，至于移动端页面是如何开发的及rem单位的特点，这里不做赘述，详情请参考我的文章" 浅谈移动端页面设计的门道 "一文。 1.安卓手机禁止字体放大js代码 <span style="font-size:14px;">/* * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小 * 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示 * 仅供参考 */ (function(){ if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { // alert(JSON.stringify

问题描述 ：为了适配各种移动端设备，动态设置了viewport缩放，然后动态设置html的font-size大小，用rem布局。但是在谷歌浏览器中查看的时候出现了问题 1.这个没问题，font-size设置的.28rem，所以换算成px应该是.28*100=28px；OK，没毛病，但是下面那行字就很大了。。 2.同样是设置.26rem字体大小，按理说应该是26px，但是浏览器里显示的是37px？？？这是什么鬼，火狐浏览器一切正常。 于是百度原因，就在于webkit的 Font Boosting 。 解决方法 ： 参考 ： 解决移动端字体大小与设定大小不同的问题 Computed font size is bigger than defined in CSS on the Asus Nexus 7 来源： CSDN 作者： jojo付啾啾 链接： https://blog.csdn.net/DreamFJ/article/details/83506083