SegmentFault viewport的问题
2022-11-22T16:33:59+08:00
https://segmentfault.com/feeds/tag/viewport
https://creativecommons.org/licenses/by-nc-nd/4.0/
nuxt怎么配置viewport?
https://segmentfault.com/q/1010000042862212
2022-11-22T16:33:59+08:00
2022-11-22T16:33:59+08:00
绝世大秃子
https://segmentfault.com/u/jueshidatuzi
0
<p>请教一下nuxt怎么配置viewport,目前只写了这么多后面不知道怎么下手了,求大佬指教<br><img src="/img/bVc30zU" alt="" title=""></p>
<meta>标签的initial scale的值大小,跟视觉视口关系?
https://segmentfault.com/q/1010000042259257
2022-08-02T16:10:13+08:00
2022-08-02T16:10:13+08:00
挑战
https://segmentfault.com/u/tiaozhan_5b4806d63747d
0
<p><code><meta></code>标签的<code>initial scale</code>的值大小,跟视觉视口关系?<br>查阅资料得知 <code>initial-scale=理想视口宽度/视觉视口宽度</code>。那么<code>initial-scale</code>,<code>1变为2</code>视觉视口宽度不应该是缩小的吗,为什么看到有人说<code>initial-scale</code>调整的是视觉视口的放大与缩小?当 <code>initial-scale=2</code>时,视觉视口放大了。怎么理解呢?</p>
lib-flexible为什么弃坑了?
https://segmentfault.com/q/1010000022238888
2020-04-02T11:02:04+08:00
2020-04-02T11:02:04+08:00
niety
https://segmentfault.com/u/niety
0
<p>我看gitgub上的说明是说由于viewport已经得到良好的支持,可是之前的缩放方案,也是使用的meta viewport设置的缩放呀。所以对这个解释有点迷茫。</p>
<p>现在amfe-flexible<a href="https://link.segmentfault.com/?enc=C66El4VwmEpR%2FBqRPmTEWA%3D%3D.oRZCIorkBa8Km2s2DdD1rLSJHktjvRx8eBu5tI6LLzYOk91x8p3ssvpZWTYqiMJm" rel="nofollow">(地址)</a>:<br><img src="/img/bVbFtqF" alt="image.png" title="image.png"></p>
<p>之前lib-flexible的源码<a href="https://link.segmentfault.com/?enc=pCA0J3%2BRH6P488raI%2F9WMw%3D%3D.6LNCA8uJDR7ErHnfwYs%2BS4U7M3SVdOS0MW3xIJ8Or%2BjD5Z%2Flz76ACfjbDMZfFB5zTLnMMP27TD0uUk5CzDgVwpcKWFtUsca0uWtv37j9ar0%3D" rel="nofollow">(地址)</a>:<br><img src="/img/bVbFtq9" alt="image.png" title="image.png"></p>
<p>如果说之前viewport单位未得到较好的支持,那之前的方案岂不是也不能解决问题吗?<br>还有所说的存在一定问题,包括什么呢?我理解的是缩放会导致视口不是理想视口,会影响到媒体查询,但会影响到查询的哪些单位呢?还有就是当页面中引入第三方组件库或富文本时,样式上的调整会比较麻烦。以及rem等比缩放这个方案,现在已经可以由vw vh来完全替代了。还有其他的什么吗?</p>
如何处理终端适配
https://segmentfault.com/q/1010000016343850
2018-09-10T21:31:47+08:00
2018-09-10T21:31:47+08:00
米奇1990
https://segmentfault.com/u/miqi1990
0
<p>面试官问这个问题 我该如何解答 从屏幕适配说起吗? 还是。。。</p>
vw 做网页适配
https://segmentfault.com/q/1010000013628290
2018-03-09T14:45:59+08:00
2018-03-09T14:45:59+08:00
王老san
https://segmentfault.com/u/wanglaosan
0
<p>问题: 我参考手淘文章 用vw做适配 <a href="https://link.segmentfault.com/?enc=quZeweUauIAIsb98ybZo7A%3D%3D.erelUMDg6FNsmfYG7Fd%2Fkg76Gc5RqvU2fC2w40eovRUY%2FywINgGM2zswtUTWfSqeBwduqoCFOYdTts1fQIFbqw%3D%3D" rel="nofollow">链接在这里</a></p>
<p>但是字体改成了vw 看起来大小不对 如图<br><img src="/img/bV5ltX?w=1585&h=488" alt="clipboard.png" title="clipboard.png"><br>由于1vw = 1% = 7.5px<br>2.933*7.5 = 22 的 但是现在字体显示的是16 </p>
<p>有同学参考过手淘的vw做过适配吗 有遇到这样的问题 希望同学们指教 谢谢!</p>
chrome浏览器手机模拟器window.innerWidth在iphone6上为什么是981
https://segmentfault.com/q/1010000012705772
2018-01-04T19:25:02+08:00
2018-01-04T19:25:02+08:00
无名小卒
https://segmentfault.com/u/wmxz
0
<p>chrome浏览器大开手机模拟器的时候,在html中没有设置viewport的时候,<code>window.innerWidth</code>不是应该是980吗?为什么实际运行中却是981,多来的1px是哪里来的</p>
<p>下面是我的html代码</p>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
hello
</body>
</html></code></pre>
<p>下图是结果图<br><img src="/img/bV1tvV?w=2948&h=612" alt="图片描述" title="图片描述"></p>
chrome浏览器模拟手机设备,页面缩放后,测试window.innerWidth返回值错误
https://segmentfault.com/q/1010000011870996
2017-11-06T10:15:51+08:00
2017-11-06T10:15:51+08:00
leon
https://segmentfault.com/u/anotherleon
0
<p>chrome浏览器模拟手机设备,页面缩放后,测试window.innerWidth返回值错误<br>浏览器版本 62.0.3202.62(正式版本) (64 位)</p>
<p><img src="/img/bVXYlq?w=1742&h=418" alt="图片描述" title="图片描述"><br><img src="/img/bVXYls?w=1356&h=383" alt="图片描述" title="图片描述"></p>
安卓app内嵌套webview viewport失效
https://segmentfault.com/q/1010000010344593
2017-07-25T18:31:41+08:00
2017-07-25T18:31:41+08:00
nannan
https://segmentfault.com/u/nannan
0
<pre><code> var dpr = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+dpr+',minimum-scale='+dpr+',maximum-scale='+dpr+'" />')
var fz = document.documentElement.clientWidth / 20
document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';
</code></pre>
<p>这段代码在IOS的APP内没有问题,但是在安卓的APP内不能缩放</p>
关于flexible适配方案缩放视口的疑问
https://segmentfault.com/q/1010000009594202
2017-05-29T23:30:08+08:00
2017-05-29T23:30:08+08:00
tedpan
https://segmentfault.com/u/tedpan
-1
<p>前几天看了阿里移动端的适配方案flexible,原理很简单,根据设备dpr,来添加特定缩放值的meta viewport头部。(具体实现的代码如下)</p>
<pre><code>//获取dpr值,计算缩放值
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
//添加meta标签
var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
</code></pre>
<p>个人理解是</p>
<p>例如设备的物理像素 750x1134 ,dpr=2,则css像素为375x667(即布局视口为375x667)。使用flexible后,缩放布局视口0.5倍,令布局视口达到750x1134,从而使CSS像素与物理像素达到1:1,实现高清方案。</p>
<p>请问这样理解对不对?缩放的是否布局视口(layout viewport)?布局视口是否对应CSS像素?如果这样理解不对,应该怎么理解?</p>
<p>这几天一直停滞在这里,求大神不吝赐教,感谢。</p>
viewport中initial-scale无效
https://segmentfault.com/q/1010000009434911
2017-05-16T12:28:14+08:00
2017-05-16T12:28:14+08:00
多啦斯基周
https://segmentfault.com/u/duolagogogo
0
<p>切图,背景图宽度为750px,写页面的时候给定的宽度也是750px,在页面的最前面设置</p>
<pre><code> <meta name="viewport" content="width=device-width,initial-scale=1"></code></pre>
<p>查看chrome响应式调试工具,页面缩放无效(chrome中)<img src="/img/bVNKBc?w=572&h=815" alt="图片描述" title="图片描述"></p>
<p>明显此时浏览器就是按照实际750的实际比例缩放的,并没有按照设备宽度进行缩放</p>
<p>但是如果将initial-scale去掉,页面就正常了,不知道为什么,是我对viewport的理解有问题?</p>
<p><img src="/img/bVNKBV?w=540&h=811" alt="图片描述" title="图片描述"></p>
<p>我认为viewport对于绝对宽度(750px)会按照设备实际宽度进行缩放,也就是说原来PSD设计图上的1px到了iphone6上就会不是1px,原来1px占据1/75-,到了iphone上实际上占用的宽度是1/750 * 375,也就是0.5px,但是不管怎样,设置了viewport之后应该是会缩放的,不知道加上initial-scale=1就无效了。</p>
<p>还请高人指点!多谢!</p>
关于页面中元素缩放的问题
https://segmentfault.com/q/1010000007161207
2016-10-13T21:35:10+08:00
2016-10-13T21:35:10+08:00
王宁宁
https://segmentfault.com/u/imwangningning
0
<p>要给页面中一个特定的元素添加手指缩放的大小的功能(平滑地缩放,就像平时手机上查看照片一样),但是页面头部的meta标签中已设置initial scale = 1.0, user-scable=no 等等,请问如何实现?望不吝赐教。</p>
viewport和@media的区别是什么
https://segmentfault.com/q/1010000006002501
2016-07-19T09:01:27+08:00
2016-07-19T09:01:27+08:00
Merlini_zc
https://segmentfault.com/u/839521787
0
<p>最近做的移动端响应式,用viewport,然后改成比例调节,就支持了移动端。<br>那么@media用在什么情况下呢?<br>这两个各自的特点和适用场景是什么?</p>
有个关与viewport的问题,initial-scale的问题,来帮帮我。
https://segmentfault.com/q/1010000005109849
2016-05-12T11:54:15+08:00
2016-05-12T11:54:15+08:00
几点黄叶
https://segmentfault.com/u/jidianhuangye
0
<p>当viewport写成这样时:</p>
<pre><code><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/></code></pre>
<p>pc端如下:<br><img src="/img/bVvBql" alt="图片描述" title="图片描述"></p>
<p>移动端如下:<br><img src="/img/bVvBqx" alt="图片描述" title="图片描述"></p>
<p>viewport的initial-scale的值改为2.0</p>
<pre><code><meta name="viewport" content="width=device-width,initial-scale=2.0,user-scalable=no"/></code></pre>
<p>pc端如下:<br><img src="/img/bVvBrP" alt="图片描述" title="图片描述"></p>
<p>移动端如下:<br><img src="/img/bVvBss" alt="图片描述" title="图片描述"></p>
<p>意思就是:当initial-scale从1.0变成2.0的时候,<br>pc端的页面没有伸缩,<br>移动端的页面变大了。</p>
<p>我的问题是:当initial-scale从1.0变成2.0的时候,pc端的页面为什么不发生伸缩呢?不懂啊。求指点!</p>
部分Android手机 <meta name="viewport" content=" "> 缩放失效问题
https://segmentfault.com/q/1010000004981370
2016-04-21T16:42:59+08:00
2016-04-21T16:42:59+08:00
imruxin
https://segmentfault.com/u/imruxin
0
<p>如题,在移动端做多屏适配的时候,发现有部分Android手机通过js 动态获取设备参数然后动态设置<br><code> <meta name="viewport" content="width=750,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no"> </code><br>中的 width 和缩放参数进行页面缩放是无效的,呈现出来的还是两倍大小的页面。然后发现是这部分手机的浏览器默认是不开启缩放模式的。那么,各位大神各位前辈们是怎么解决这个问题的呢?</p>
<p>谢谢~</p>
android webview 屏幕适应问题
https://segmentfault.com/q/1010000004736021
2016-03-30T16:19:06+08:00
2016-03-30T16:19:06+08:00
红茶绅士
https://segmentfault.com/u/htea
0
<p>target-densitydpi = device-dpi 用了之后虽然 webview的分辨率==实际窗体的分辨率</p>
<p>但是整个html以及js交互超级卡??这是为什么?</p>
<p>target-density据说不推荐用,那android端的替代方案是什么?</p>
flex-box布局,真机上显示布局错乱,并且缩放比存在问题。
https://segmentfault.com/q/1010000004691440
2016-03-26T10:27:00+08:00
2016-03-26T10:27:00+08:00
Futurefinger
https://segmentfault.com/u/marklo
0
<p>问题:<br>**页面用的flex-box布局的,手机模拟器里看显示效果正常,在真机上显示布局都乱了,而且缩放比有问题,内容被无限放大。如题请问怎么破?<br>手机模拟器iphone5实测如下:**</p>
<p><img src="/img/bVtQBt" alt="clipboard.png" title="clipboard.png"><br>页面布局显示正常。</p>
<p>iPhone5 真机测试如下:<br><img src="/img/bVtQBy" alt="clipboard.png" title="clipboard.png"><br>内容排版错乱,内容比例被无限放大。同时出现横向滚动条。</p>
<p>网友意见是让我在body上加overflow-y:hidden,实则解决不了布局和比例的问题。</p>
<p>上面效果,源码上是加了如下代码的:</p>
<blockquote><pre><code><meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</code></pre></blockquote>
<p>请问webapp的页面开发,标准解决办法是什么?<br>希望各位前辈,专家,大神能提供主流的方法,刚接触没多久,实在是晕了!</p>
前端移动开发中,响应式viewport写死一个值和使用device-width有什么不同?
https://segmentfault.com/q/1010000004394573
2016-01-31T12:34:28+08:00
2016-01-31T12:34:28+08:00
WatcherLin
https://segmentfault.com/u/watcherlin
0
<p>最近看到公司项目的做法是所有页面都设定viewport=640,而之前看到的做法好像更加倾向于使用device-width的做法。</p>
<p>直接写一个值好像在各端展现也很统一,写device-width的反而还要为不同情况写不同样式(起码字体是需要调整吧)。</p>
<p>这两种做法哪种更好?</p>
不同设备间 font-size 自适应?????
https://segmentfault.com/q/1010000004387922
2016-01-29T16:20:22+08:00
2016-01-29T16:20:22+08:00
又改名喽
https://segmentfault.com/u/yougaiming
0
<p>写页面的时候用一个尺寸比如宽度 414,font-size 都是 rem定义的<br>然后,js根据页面的宽度/414*10px。 不同尺寸的ios设备都可以实现字体缩放<br>android其实也可以,但是有偏差【比如会换行】貌似会大点……</p>
如何适配不同分辨率的移动端web的整页图片和文字大小和位置?
https://segmentfault.com/q/1010000003959005
2015-11-06T12:04:18+08:00
2015-11-06T12:04:18+08:00
Kinice
https://segmentfault.com/u/kinice
0
<p>这里要做一个页面,只有一张图片和几个文字,要求适配移动端,图片宽度要永远与移动端宽度相等,下面有几行文字,在不同的分辨率下文字大小、间距等要看起来差不多。如何实现?</p>
highstock不能完整显示图表列项
https://segmentfault.com/q/1010000003064225
2015-08-07T17:34:21+08:00
2015-08-07T17:34:21+08:00
friends119119
https://segmentfault.com/u/friends119119
0
<p>highstock的柱状图在web都能够正常画出,但是在手机上不能正常画出,请问为什么?效果如图图为 同一幅图 在web浏览器 和iPhone5下对比图<br><img src="/img/bVm1iE" alt="clipboard.png"><br>
底下柱状在web页面能够正常显示<br><img src="/img/bVm1iI" alt="clipboard.png"><br>
底下柱状在iPhone5情况下,上半部分能够画出后半部分不能画出<br><strong>是不是因为240条数据太多画不下?那该怎么办?</strong></p>
mobile web页面点击跳转导致元素变形
https://segmentfault.com/q/1010000002936006
2015-06-26T11:12:01+08:00
2015-06-26T11:12:01+08:00
透支一切
https://segmentfault.com/u/touzhiyiqie
0
<p>页面中有一个div,包含a元素<br>
<meta content="width=640, target-densitydpi=320, maximum-scale=1.0, minimum-scale=0.1, user-scalable=no" name="viewport"/><br>
<style><br>
.c{ background: url(xxx.jpg); width: 100px; height: 100px; position: relative;}<br>
.a{ width: 50px; height: 50px; position: absolute;}<br>
</style><br>
<div class="c"><br>
<a href="http://tmall.com" class="a"></a><br>
</div></p>
<p>在魅族4和华为p6的webview中点击链接后会瞬间放大.c的背景图然后完成跳转。请问大侠们明白我的问题了吗?多指教呀!</p>
安卓微信浏览器内设置viewport不生效,如何解决?
https://segmentfault.com/q/1010000002723052
2015-05-02T17:17:52+08:00
2015-05-02T17:17:52+08:00
lhc
https://segmentfault.com/u/linghucong
0
<pre><code><meta name="viewport" content="width=device-width, initial-scale=0.5, minimal-ui">
</code></pre>
<p>设置之后发现大小没有变化,如何解决?<br>
在iphone上显示正常。</p>
关于viewport的设置问题
https://segmentfault.com/q/1010000002705502
2015-04-24T16:04:25+08:00
2015-04-24T16:04:25+08:00
小飞机
https://segmentfault.com/u/xiaofeiji
0
<p>我在使用这条meta标签的时候,出现一点问题,跟高手请教一下:</p>
<pre><code>meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
</code></pre>
<p>请问,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no 这三条规则是否重复了?只用user-scalable=no 不可以吗?两条规则一起用,有什么特别的用意吗?</p>
<p>因为我在测试华为u9508的时候,发现minimum-scale=1.0, maximum-scale=1.0这两条规则,会导致chrome浏览器在渲染svg的时候出错。去掉或者设置min/max不相等就恢复正常了。</p>
请教viewport的选择
https://segmentfault.com/q/1010000002551392
2015-02-11T18:39:33+08:00
2015-02-11T18:39:33+08:00
whosesmile
https://segmentfault.com/u/whosesmile
0
<p>这个问题我考虑了有一阵子了,在一个QQ群也打了场口水仗,所以抛出来看看有没有革命先驱帮忙解惑。</p>
<p>手机网页开发是一般的viewport会设置为:</p>
<pre><code><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=0" />
</code></pre>
<p>通常这么做是为了做响应式调整,或者做自适应不同尺寸手机,然后通过rem或百分比来控制样式,再通过脚本去判断屏宽动态改变html元素的font-size;(手机淘宝这么干的)。</p>
<p>但是现在如果我只考虑手机,不考虑平板和PC平台,我不需要考虑自适应,放弃媒体查询一系列复杂设计,放弃响应式布局,我也可以采用640或750(Iphone6)定宽切图,通过viewport强制手机浏览器按640分辨率去渲染,viewport设置如下:(手机天猫首页采用了320的定宽)</p>
<pre><code><meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />
</code></pre>
<p>这样我切图的时候就认为手机是640的分辨率,然后让浏览器去缩放,我在魅族手机上测试兼容性,搜狗浏览器不支持,貌似浏览器会依然保持960的宽度,但是IOS上的搜狗浏览器支持,至于其他主流的如QQ, UC,chrome,猎豹,百度,包括微信的webview,都支持定宽viewport。</p>
<p>我的问题是为什么这种模式没成为主流?是因为历史原因么?老版本系统不支持?技术人员喜欢炫技术找存在感?(哈哈)还是别的神马?我现在如果开始开发新产品,采用这种模式是否可以呢?请不吝赐教~</p>
<p><em>(我贴个 <a rel="nofollow" href="http://blog.smilelegend.com/aloha/index.html">测试地址</a>,按640宽度切图的,不是广告,只是静态页,没有脚本,顺便请大家在手机上测试下兼容性试试)</em><br>
微信可以扫描下面的二维码:<img src="/img/bVmGB6" alt="图片描述"></p>
怎么使移动端checkbox:checked 伪元素样式变化变得迅速
https://segmentfault.com/q/1010000002404862
2014-12-03T22:29:22+08:00
2014-12-03T22:29:22+08:00
Songlairui
https://segmentfault.com/u/songlairui
0
<pre><code><meta name="viewport" content="width=device-width">
</code></pre>
<p>与</p>
<pre><code><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
</code></pre>
<p>采用两个不同的meta有巨大差别:<br>
前者在 android、windowsphone 下,对 <strong>input:checkbox</strong> 或 <strong>input:radio</strong> 进行 checked 样式变化时,有触屏触碰事件的延时。</p>
<h2>这怎么办?</h2>