viewport | 易学教程

移动端页面

阅读更多关于移动端页面

1.引入jquery.js和adaptive.js adaptive.js (function (win, lib) { var doc = win.document; var docEl = doc.documentElement; // 设备像素比 var devicePixelRatio = win.devicePixelRatio; // 我们设置的布局视口与理想视口的像素比 var dpr = 1; // viewport缩放值 var scale = 1; // 设置viewport function setViewport() { // 判断IOS var isIPhone = /iphone/gi.test(win.navigator.appVersion); // 布局视口与理想视口的值与设备像素比相等只针对iphone if (isIPhone) { // if (devicePixelRatio >= 3) { // dpr = 3; // } // else if (devicePixelRatio === 2) { // dpr = 2; // } // else { // dpr = 1; // } // } // else { dpr = 1; } // window对象上增加一个属性，提供对外的布局视口与理想视口的值 win

解决移动端字体大小与设定大小不同的问题

阅读更多关于解决移动端字体大小与设定大小不同的问题

前段时间回头去写纯静态Html页面，涉及到手机端匹配的时候，遇到了特别棘手的问题如图，设置font-size是14px，可是Chrome实际渲染是42px。但是同页面另外同样的标签却没有任何问题所有的CSS样式都删除依然无法生效，在想是不是动态设置了viewport的问题？问题依然无法解决，直至偶然看到一篇文章： Font Boosting 才算是彻底解决了这个问题简单来说这也是webkit挖的一个坑，这个特性被称为「Text Autosizer」，最初的目的是希望手机端访问网页，因为宽度过大而看不清字体提出的一种解决方案。这个方案就是将字体适度的增大，保证既可以不缩放页面，也能看清文字信息特性很好，但是一旦所有的元素都得按照设计稿一点点敲定的时候，这个特性就变得十分恶心了解决方案和原理在引入的这篇文章里面也有详细的解释，再复述一次吧： 1.用viewport的width手动指定宽度，但是对我的页面没什么效果 2.给body设置max-width等于99999px（这是唯一有效的属性，max-height是无效的） 3.单独给搞事的那段标签设置max-width，这样问题就不会出现了原理就是TextAutosizer.cpp这个文件对 originFontSize原始字体大小进行了再计算，乘以了multiplier 换算系数如果viewport中width

前端适配

阅读更多关于前端适配

移动端开发中，关于适配问题的一点总结(一) 转自：http://www.jianshu.com/p/3a5063028706?nomobile=yes 我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。下面这段代码，做过移动端项目的同学一定不会陌生。假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于像素，视口，分辨率，meta视口相关的内容展开叙述。要实现像素级还原，首先我们要搞清楚什么是像素。 #像素像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种特定颜色的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？ //废话 lol ，就是给它设置宽度200px 呗，stupid question..

移动端Web页面适配方案

阅读更多关于移动端Web页面适配方案

移动端Web页面适配方案移动端字体大小移动端适配移动端web bolelee 3月20日发布赞 | 6 收藏 | 67 6.3k 次浏览更新：完整 js 代码和 sass mixin 已上传于gitHub，点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。适配的目标引用一文章的描述：在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。概念理解在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的也是摘抄了其他文章的描述，本文末有附相关链接。 viewport视口 viewport是严格的等于浏览器的窗口。 viewport 与跟 viewport 有关的 meta 标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深入理解， viewport 与布局的关系，可以看下这篇文章：在移动浏览器中使用viewport元标签控制布局

html页面手机适配方法

阅读更多关于 html页面手机适配方法

在head中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> viewport ：用户网页的可视区域. width：控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放100%时的CSS的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 max imum-scale：允许用户缩放到的最大比例。 user -scalable：用户是否可以手动缩放。来源： CSDN 作者： xiao_yuly 链接： https://blog.csdn.net/jacob_ios/article/details/79739536

app端的前端界面适配问题

阅读更多关于 app端的前端界面适配问题

1.视口ViewPort适配  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> 适配视口之后,pc端和手机端屏幕大小不匹配问题就解决了; 2.图片不清晰问题使用大一倍的图片,通过css进行强制压缩到原来大小;背景图可以使用background-size适配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">  <title>app</title> <style type="text/css"> body{ margin: 0px; } .header{ height: 50px;

解决网页在手机端显示界面很小的问题

阅读更多关于解决网页在手机端显示界面很小的问题

在使用Vue+mintUI写项目的时候发现在电脑上调试很好，但是到手机上就发现界面变得好小好小，于是Google了一些解决了该问题。参考 html网页兼容手机浏览器（解决显示页面很小的问题） ,添加一下代码到mata声明中即可。 < meta charset = "utf-8" name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 引用自阮一峰老师的博客自适应网页设计中的话： “自适应网页设计”到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js 。

H5移动端自适应屏幕

阅读更多关于 H5移动端自适应屏幕

移动端 H5 --页面适配（二）

阅读更多关于移动端 H5 --页面适配（二）

一、基础概念在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？移动端H5解惑-概念术语（一）二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。 2.2 移动端为什么要做适配在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示一致。一致是什么意思？就是下面提到的几个主要解决的问题。三、页面适配主要解决的问题元素自适应问题文字rem问题

移动web的适配

阅读更多关于移动web的适配

我在另一篇文章中谈到过一些移动端分辨率自适应问题，主要是基于个人实际开发中遇到的问题提出的解决方法。近期有幸听到他人对移动web开发的分享，特来补充上一篇文章，向大神讨教。 Part 1 理解关于长度单位的一些概念 1、设备像素或逻辑像素指设备能控制显示的最小物理单位，意指屏幕上一个个的点（还是不理解？？太正常了，接着往下看） 2、CSS像素或设备独立像素指CSS样式代码中使用的逻辑像素，即px（在iPhone中单位为pt）（这个好理解吧） 3、像素密度（PPI）指设备能控制显示的最小物理单位，意指屏幕上一个个的点（嘻嘻，=设备像素或逻辑像素） PPI越高，分辨率也就越高 4、像素比（dpr）设备像素比=设备像素/CSS像素比如：iPhone6的像素比为2 = 750/375 在开发中，UI设计狮以设备像素制作设计图；前端攻城狮把设备像素按照像素比进行换算，得到CSS像素，以此为单位制作网页进一步举例理解，在普通屏和2dpr下，css像素和设备像素的情况以下两种情况都会带来一定的图片不正常的问题 Part 2 关于视口的概念 1、Layout viewport（布局视口）浏览器默认设置了一个viewport 元标签，定义一个的虚拟视口，用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px

订阅 viewport