viewport

《hello,移动web》笔记

由 烂漫一生 提交于 2020-01-03 13:27:09
http://www.imooc.com/video/9669 Hello，移动WEB 第1章 课程介绍 1-1 课程介绍 第2章 移动Web的基础知识 2-1 pixel像素基础 px:css pixel 逻辑像素，浏览器使用的抽象单位 dp,pt:device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比 计算公式：1px = dpr的平方*dp iphone5分辨率：640dp*1136dp 为什么iphone5是320px*568px？ iphone5的drp=2，1px=4dp，所以长度上1px=2dp，640dp => 320px；1136dp => 568px dpi:打印机每英寸可以喷的墨汁点（印刷行业） ppi:屏幕每英寸的像素数量，即单位英寸内的像素密度 目前，在计算机显示设备参数描述上，二者表达的一样意思 iphone5: ppi = 根号(1136的平方+640的平方)/4 = 326ppi(视网膜retina屏) ppi越高，像素数越高，图像越清晰；但可视度越低（小），系统默认设置缩放比越大。 2-2 Viewport视图 为什么不使用默认的980px的布局viewport .宽度不可控制，不同系统不同设备的默认值都可能不同 .页面缩小版显示，交互不友好 .链接不可点 .有缩放，缩放后又有滚动

搞定响应式布局

由 假如想象 提交于 2020-01-03 03:58:19
最近有的小伙伴面试会被问到响应式布局媒体查询的相关知识，这篇博文我就来给大家总结一下响应式布局的相关知识。 响应式布局是什么呢？ 响应式布局时2010年5月份提出来的一个概念。是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。例如我们用电脑、手机、平板等设备访问同一个网页展示出来的效果却是不一样的。 这里我们就拿匹克的官网来看吧，我们打开匹克的官网是这样子的： 当我把窗口调小时： 我们可以看出logo右侧的导航栏间距变小了，嗯 莫慌，我们再让它变小一点： 这张是我把窗口调到最小的时候展现出来的页面。 这个就是一个简单的响应式布局，响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 页面头部必须有meta声明viewport ： < meta name = viewport " content=' width= device -width, initial-scale=1, maximum-scale=1, user scalable=no" > width= device -width 视口宽度等于可视窗口宽度； user scalable=no 不允许用户缩放； initial-scale=1 初始化比例为1； maximum-scale=1 最大缩放比例为1； 优缺点 ➢优点:面对不同的分辨率设备灵活性强 能够快捷解决多设备显示适应问题

Set viewport to match physical pixels

由 核能气质少年 提交于 2020-01-02 09:29:10
问题 I'm trying to make the viewport exactly match the physical pixels on the screen. The page I'm working on's HTML (which I can't change, because that would break other things using the same HTML) includes: <meta name=viewport content="width=device-width, initial-scale=1"> How would I make the viewport match physical pixels in javascript? 回答1: What you want to do is layout into a larger viewport and then scale down the page until it fits into the screen. window.devicePixelRatio is the number of

Mobile site - doesn't scroll at all

由 泄露秘密 提交于 2020-01-02 06:38:12
问题 I've googled everywhere - my site has no fixed heights, no fixed placements. It shows the viewport as I'd like, but ONLY that. It doesn't scroll or show anything else. What am I missing? I've tried all sort of overflow options, nothing seems to be working. 回答1: I would do the following... I would first temporarily disable/remove the stylesheets to make sure everything is spiffy as plain html (if you still have an issue without the stylsheets, there is probably a js script wrecking chaos) I

HTML meta viewport属性说明(mark)

由 ＊爱你＆永不变心＊ 提交于 2020-01-02 02:53:38
偶遇PC站网页，客户想在手机上查看（不是响应式那种，自然缩放那种）： 直接以下代码： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/> 但发现，样式仍然会乱，检查有些模块是不是没有限制最小宽度，直接崩塌至手机的屏宽，可直接将body设置最小宽度即可! Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放 引入好的文章：

详解 <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">

由 ぐ巨炮叔叔 提交于 2020-01-02 02:52:18
一次面试前端开发,被要求详解 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。 1. name="viewport" meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。 2.content 属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">

由 旧城冷巷雨未停 提交于 2020-01-02 02:51:12
viewport：移动设备上用来显示网页的那部分区域，但其大小并不局限于那部分可视区域 width设置 layout viewport 的宽度，为一个正整数，或字符串"device-width" height设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 initial-scale设置页面的初始缩放值，为一个数字，可以带小数，取值1.0则页面按实际尺寸显示，无任何缩放 minimum-scale允许用户的最小缩放值，为一个数字，可以带小数，取值1.0将禁止用户缩小到实际尺寸之下 maximum-scale允许用户的最大缩放值，为一个数字，可以带小数，取值1.0将禁止用户放大到实际尺寸之上 user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 来源： https://www.cnblogs.com/s-qiu/p/7249837.html

<meta name=\"viewport\" content=\"width=device-width, maximum-scale=1.0, initial-scale=1.0, user-sc

由 淺唱寂寞╮ 提交于 2020-01-02 02:50:19
网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 来源： https://www.cnblogs.com/webu/archive/2013/03/28/2987179.html

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0\" />

由 ぐ巨炮叔叔 提交于 2020-01-02 02:49:04
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 手机页面中在<head></head>中加入这句话，可以让页面适应设备的宽度。 width=device-width--宽度为设备宽度，如果你的页面宽度小于设备宽度，就需要修改一下这个属性，不然的话会出现可以页面左右滑动，如ipad ios7中客户端页面。 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 来源： https://www.cnblogs.com/0808bing/p/3429674.html

移动设备优先

由 断了今生、忘了曾经 提交于 2020-01-01 02:27:59
移动设备优先 在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 Copy <meta name="viewport" content="width=device-width, initial-scale=1"> 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ Copy <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 排版与链接 Bootstrap 排版、链接样式设置了基本的全局样式
订阅 viewport