viewport

前言:这里收集一些业内见到的移动端浏览器的兼容性问题. 如果大家也也到过, 欢迎补充. 1 虚拟键盘引起的兼容问题。 2 touch 事件引起的问题. 3 iOS 和 android 系统导致的差别。比如，微信内置浏览器 4 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 解决方案: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> （部分 安卓 手机的UC浏览器写完以后还是可以放大缩小） 5 忽略将页面中的数字识别为电话号码 解决方案: <meta name="format-detection" content="telephone=no" />（ iOS 上会明显 有时候会把数字当成电话号码） 6 忽略Android平台中对邮箱地址的识别 解决方案: <meta name="format-detection" content="email=no" /> 7 移动端浏览器部分兼容问题 解决方案: viewport模板: <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这一点…… viewport 语法介绍： 01 <!-- html document --> 02 < meta name = "viewport" 03 content = " 04 height = [pixel_value | device-height] , 05 width = [pixel_value | device-width ] , 06 initial-scale = float_value , 07 minimum-scale = float_value , 08 maximum-scale = float_value , 09 user-scalable = [yes | no] , 10 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 11 " 12 /> width 控制 viewport 的大小，可以指定的一个值或者特殊的值，如

前言 对于移动webapp开发人员来说，viewport是个很重要的东西，容易用但很多时候都是不明白的，于是我决心去弄清楚它。 < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" > viewport涉及的单位 分辨率：指设备显示器所能显示的像素有多少 物理分辨率：指设备显示器所能显示最高的像素数 DPI （Dots Per Inch）：每英寸的点数密度 PPI（Pixels Per Inch）：每英寸的像素点 DIP/DP（device independent pixels）: 设备独立像素, 这个由设备硬件决定。 devicePixelRatio ： 设备像素比 （ window.devicePixelRatio = 物理分辨率 / dip ） PS：在计算机或移动屏幕中提到ppi和dpi其实都一样， 越高的PPI所呈现的内容越清晰。 什么是viewport？ 其实手机浏览器装载页面是放在一个中间件里面的，而这个中间件就是viewport。（起初是ios提出的，后来android借用了） viewport重要概念 1.可视区（visual area） :

最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做， 难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！至于为什么觉得难、觉得无从下手。 段亮觉得有以下几点： 一、没有完整的思路和流程 就像做 网站的流程 一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。 二、把html5这门技术想的高深莫测 好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深， 其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊， 简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好：" 外行看热闹，内行看门道 ") 好了扯了这么多，下面就说说怎么来开发移动手机网站吧！ 基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。 一、框架开发手机网站 一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就 没具体去研究过。 为什么说 BootStrap

1.笔者发现，同样的一个网页，在电脑端显示清楚，但是如果在移动端没有做自适应，有些情况下同一个网页在 移动端字体会变得很模糊。在开发移动端应用的时候，习惯性的我们会加上一下meta标签。 < meta name= "viewport" content= "width=device-width,initial-scale=1.0" user-scalable= "no;" > 2.为什么需要加上这个标签？ （1）首先谈谈自己对于Layout viewport(布局视口）的理解 个人对于布局视口的理解，就是 设备当前选择的分辨率 。默认情况下，如果同一个电脑端网页要在移动端 显示IOS，Android都将这个视口设为980px，设想一般手机的分辨率是400*600px左右，如果要在该手机上呈现一个98 0px的视口，那么显然这个网页会变得模糊不清。 （2）什么是Visual viewport(视觉视口） 视觉视口，个人认为视觉视口与物理像素有关，一般的手机设备物理像素是大大的高于分辨率的， 也就是说视觉视口的大小是远远大于布局视口，下面是一段官方对于视觉视口的解释： visual viewport（视觉视口）备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如iPhone的物理像素： iPhone5 ：640 * 1136 iPhone6

当开发html5的时候 如果不设置 viewport的时候 - android chrome 的默认宽度是980px（设置了 width =device-width 后 就是设备宽度） - iphone safari iphone6 的默认宽度就是375（即使不设置viewport width ＝ device－width） 宽度指的是 document.documentElement.getBoundingClientRect().width 来源： CSDN 作者： ISaiSai 链接： https://blog.csdn.net/ISaiSai/article/details/50481340

1、<meta name="renderer" content="webkit"> 这是指定双核浏览器，默认以何种方式渲染页面。 <meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式 而 webkit|ie-comp|ie-stand 这种写法，跟font-family的规则类似，按照顺序排他的优先级，不支持则往下，浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。目前支持对其提供支持的浏览器有:360 2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 这是一个文档兼容模式的定义。 Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 使用以下代码强制 IE 使用 Chrome Frame

未来肯定是移动端的天下，接下来谈谈h5移动端的布局问题，目前有三种 1、百分比布局 —–>有点兼容性好，缺点布局的时候需要计算比较麻烦，不过可以采取工具或脚本实现。 2、flex布局 —–>目前看来兼容还是有一定问题，尤其是低版本andriod 3、rem布局 —–>目前比较推崇的布局方案，感兴趣的可以看看 淘宝的flexible 我的布局方案 一、定宽布局 我先解释一下原理，由于以前的机器是320**XXX的分辨率，所以我采取的320布局，图片当然要做2倍图或者3倍图，就是说320px是我们的布局基础。例如iphone5是640*1136px，但是我们用js获取的实际宽度是320*568，也就是说屏幕相当于一个点，由两个像素，如果这个点由显示的像素越多，屏幕就约清晰。 例如: 一个新的设计图是640*1136的iphone5，其实机子的实际宽度是320*568。我们可以按照320宽度进行布局，也就是说所有的图片我们需要用宽度或者背景宽度来控制。这样即可以采用ihpone 5可以采用，2倍图标，iphone6 3倍图标。 这样我们其实是把宽度写死了，也就是说在机子上的宽度显示的永远是320px的。这里我们就要想法进行缩放去适配各种不同机子，也就是rem方式。rem其实是相对于根节点的font-size大小进行缩放，也就是默认情况下1rem=16px。那么我们的320px=20rem

随着手机硬件配置的飞速增长、屏幕尺寸的越来越大和网络带宽的逐渐提升，越来越多的PC业务和服务在向移动端转移。然而在这移动端的时代，为了处理各终端屏幕的适配，是否乱了手脚呢？https://hzzly.github.io/2017/03/15/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D%E7%9A%84%E8%A7%A3%E5%86%B3/ 虽然移动端的页面与PC的页面相比简单了不少，但让我们头痛的事情还是要想尽办法让页面能适配众多不同的终端设备。 在前几个外包项目中，我做的主要都是移动微信端的。期间也遇到了不同屏幕大小的适配问题，所以今天特来分享一下我的解决方法。 项目地址： https://github.com/hzzly/xyy-vue demo地址： http://hjingren.cn/xyy-vue/ 欢迎大家的star啦~ 一、meta标签 meta之viewport，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要在html中设置meta标签如下： 1 < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0,