本文作者：李晓玮，腾讯 IEG 高级工程师 都2019年了，手机查看HTML邮件的体验怎么还那么差？ 试想一下，你在夜深人静的时候，准备睡前查看一下订阅的邮件周报，而且还是一个精心设计过的HTML富文本邮件。只不过它只能在pc上完美展现，在手机上最大的字号只有不到4像素，图片也变成了马赛克，会是一种怎样的虐心体验。 最近做了一个群发邮件的手机端适配需求就是要解决这个体验问题，先上效果。 优化前： 优化后： 当然，pc端和网页版也要完美适配，outlook、foxmail和网页版效果如下：
“未来是重前端轻后端的天下”，你没有听错，这是云适配CEO陈本峰给企业移动化的重新定义，但对于这个说法T哥还是持保留意见，因为一直被大家宣贯的轻前端重后端在云适配这里却被彻底颠覆。为什么云适配如此执着他这一观点，还要从他的创始人和产品理念说起。 HTML5争议中的前行者 陈本峰，云适配创始人CEO、HTML5的忠实支持者、原微软IE团队的核心工程师，一直有着打造移动端的跨平台多屏适配梦，所以从云适配的名字我也能猜出产品的大概，以HTML5为核心专注前端的适配能力，起初了解云适配还是那句带点狂妄的广告语，一行
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
导读 随着智能手机的高速普及，人们将更多时间放到了手机上，麻利的做着以前只能在电脑上才能完成的购物、聊天、信息获取等事情。如此一来，站长们对移动端的 SEO 也就越来越关注。当然，也各大搜索引擎也开始发力移动搜索，比如百度近期推出的2014 网站移动化大赛和开放适配、360 推出的移动适配等。而张戈对于移动适配也是关注已久，写过不少相关文章，现在就来分享一个通过 php 自动生成百度开放适配和 360 移动适配的专用 sitemap 文件的方法。 先再次回顾下，张戈关于百度开放适配和 360 移动适配的历次
最近，端内在做 webView 统一的时候，个性签名中的 WebView 替换为 CustomWebView 之后，发现字体突然变小。
转换成html后，这个html还没完成的，因为这个html只是适应电脑的桌面的，还没适配手机屏幕，因此需要修改html增加两处的代码才行。
iPhone X 适配方案 2017年9月苹果发布了 iPhone X 机型，对于它的“刘海儿”和底部 Home Indicator，QQ空间 H5 也在第一时间做了兼容适配。在适配过程中，我们尝试了这三种方案，如下。 解决方案1 客户端适配 客户端直接将 webview 的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色 webview 内： 利弊分析 优点：H5 前端开发没有任何适配工作量。 缺点：页面会限制在客户端限制的 webview 区域内，没有满屏效果。 解决方案2 使用 media
单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。所以为了降低代码重复率，提高开发效率，一般开发会把一个或多个控件的结构、样式、行为、联动封装到一个文件中，这样一个组合文件就称为“组件”。
[总结]我对移动端适配的了解 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b
image.png 2017年9月苹果发布了iPhone X机型，对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧！ 客户端适配 解决方案 客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内： image.png 利弊分析 优点：H5前端开发没有任何适配工作量。 缺点：页面会限制在客户端限制的webview区域内，没有满屏效果。 使用media query 解决方案 针对iPhoneX机型
在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异，而是直接按设计稿的标注来开发。比如设计稿里标注的文字字号是30px，CSS里就设置文字字号30px。
在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。
前言 在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍 1. H5页面 H5即 HTML5，是最新的 Web 端开发语言版本，大多数手机 APP 页面会用 H5 实现，包括 PC Web 站点也会用它开发实现。所以 Web 的通用测试点和方法基本都可以适用于它。H5其实就是：移动端Web页面。 H5应用在很多地方，如APP的活动专题页面、新闻页面、微信公众号文章
前言 在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。 H5页面介绍
@media mediatype and | not lonly (media feature) {
神马搜索借助uc的优势，可直接在地址输入框中输入关键词就可以搜索了，免去了输网址的麻烦(这个在国外有点long duan的嫌疑).如果你的网站被bd等se收录了以后一般也是会被神马搜索收录的，查询方法也是用site:***.com。那么我们做好神马搜索优化呢？ 既然神马搜索支持site指令，根据genfeng是思路，那它是不是也有站长工具平台呢？答案是有的，只不过得到这个结果稍微有点迂回。起初在网上搜索了相关问题都没找到，后面想想神马搜索是在uc上的，那在uc官网应该有一些提示。在uc社区的神马搜索
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
我们在开发中，显示信息详情时，一般后台会给出html文本，在android端一般采用webview控件来展示，但是后台给出的html文本一般是给电脑端用的，没有自适配手机，导致手机端图片显示过大，需要左右移动来查看全图。下面给出几种实用方法，达到在手机端用webview展示html中的图片，能自适应手机屏幕展示。
假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 :
最近项目使用原生html开发，虽然webstorm自带localhost的访问，但是手机端并不能直接这样写地址，所以需要配置本机IP地址的访问，以便在手机端也能看到h5页面的效果，避免未知的bug问题。
0. 前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者
html5是什么？ HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变，能适配pc、手机等各终端，跨平台性能极强，移动互联网是未来的趋势，html5将会扮演越来越重要的角色。 html5能干什么？ HTML5 是一个新的web标准的集合，它包括全新定义的HTML标签和更为规范化的HTML标签，CSS3以及全新的javascript API接口。这些接口既能操作前端所见所得，也能操作后台输送到前台的数据，可以实现类似于智能手机APP端的应用 html
在pc版网页(http://pc_url) 上，添加： <link rel="alternate" media="only screen and(max-width: 640px)" href="http://pc_url" > 在移动版网页(http://mobile_url) 上，所需的注释应为: <link rel="canonical" href="http://mobile_url" > 之前的Meta标记（mobile agent）会继续沿用，但我们推荐使用HTMAL5语言制作的移动页面使用最新
电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发（我现在知道的尚浅）目前我了解有
什么是微信小游戏？ 看前几天的科技新闻，微信中的“跳一跳”小游戏从去年12月发布，截至到今年3月份已经积累了3.9亿玩家，这是一个多么恐怖的数字，“跳一跳”游戏带火了整个微信小游戏开发圈。微信小游戏
2、区分app和手机端网页 手机app：是那些可以在手机的应用商店下载安装的软件，如微信、QQ等 手机端网页：是浏览器打开的网页，如www.taobao.com。（大部分写网页）。
网站做小程序很重要的一点，就是我们需要设置WordPress的伪静态规则还有在服务器都需要设置（这是必须加必的设置）。
手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。
github代码地址：https://github.com/Miofly/mio.git
前端涉及到的领域不单单只是PC浏览器了，现在是移动为王的时代，所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。
rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。
自 W3C 于 1999 年发布 HTML4 后，Web 世界快速发展，一片繁荣。人们一度认为 HTML 标准不需要升级了。一些致力于发展 Web App 的公司另行成立了 WHATWG 组织，直到 2007 年，W3C 从 WHATWG 接手相关工作，重新开始发展 HTML5。
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
就拿小米 6手机为例子，它没有圆孔来让耳机插入，就只有一个方孔，那我们怎么插耳机呢？小米手机提供了一个转接口来帮我们干这件事，耳机本来就可以插圆孔但是不能插方孔，转接头既可以插圆孔也可以插方孔。这就使得本来耳机不能插入手机，通过一个转接口可以实现这个功能。这个转接口其实就是一个适配器，它让耳机和手机本来不可以通信的两个事物之间产生了关系。
涉及到网站需同时兼容 PC 和移动端情况更甚：px、百分比、em、rem、vw etc.
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。
最近在开发微信公众号网页的时候，由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug，但这些bug只会在固定的机型或者部分手机复现，电脑端调试以及大部分手机都是没有问题的。所以需要在手机上模拟控制台输出日志来查看是否有报错。
Android全面屏的手机越来越多了,要开始考虑应用适配全面屏的问题了,查了查相关文章,总结一下.
前天，张戈博客终于搞定了网站静态缓存下的移动端站点切换，从而也多了一个移动二级域名。于是又开始纠结这个 2 二级域名是否需要屏蔽搜索引擎的收录，毕竟内容一摸一样。 听 SEOer 们说，搜索引擎会将二级域名视为不同的 2 个站点，如此一来，我的移动站点是否要做相应的处理，就值得深思了。（如有清楚的站长，请告知，多谢~） 然而，就在今天百度搜索相关资料的时候，发现百度开放适配居然有三种方法...... 之前只注意到了百度开放适配的 sitemap 提交方法，张戈前后折腾了如下几篇文章： 1、百度开放适配专用
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的，先看一个简单例子：
移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
最近在学习mybatis的源码，发现了里面用了非常多的设计模式，今天就来总结一下从mybatis源码中看到的适配器设计模式。为什么一些经典的优秀的框架能够经久不衰呢？不仅仅是因为他们的功能强大，而是在于源码里面的思想，用到的设计模式非常灵活。这就是我们为什么一定要去阅读一些优秀的开源框架的源码，从源码中理解设计模式会发现比我们从书本上看到的更容易理解，从而是我们更容易思考在我们写代码时什么时候能运用这种模式,这是成为一个架构师的必经之路。例如，mybatis中的日志功能就是灵活的使用了适配器设计模式，mybatis中并没有自己的日志功能，他就是适配了各种第三方的日志（slf4J 、commonsLoging 、 Log4J2、 Log4J、 JdkLog）。好了，废话不多说了，直接适配器设计模式。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
