首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端网页布局】移动端网页布局基础概念 ② ( 视 | 布局视 | 视觉视 | 理想视 )

一、视 ---- 浏览器 显示 网页页面内容 的 屏幕区域 被称为 " 视 " ; 视分为以下几个大类 : 布局视 视觉视 理想视 上面的视 , 只需要关注 理想视 即可 ; 1、布局视...在移动设备上,由于屏幕较小,需要 对网页进行缩放以适应屏幕大小,因此布局视也需要进行调整。 移动设备上的布局视 通常比 桌面浏览器中的布局视 小,因为 移动设备屏幕的大小通常比桌面屏幕小。...移动设备浏览器中,设备屏幕较小,页面需要进行缩放以适应屏幕大小,视觉视 会比 布局视 小。...下图中 , 在下面的 视觉视 中 , 网页只能被看到一部分区域 ; 3、理想视 ( 网页大小 = 设备大小 ) 理想视 - Ideal Viewport 指的是指在浏览器中,使 网页布局 和 显示最佳的视大小...理想视的大小 取决于 网页的内容和布局,通常应该 与布局视的大小相同 。 通过设置理想视,可以 使网页在不同设备上具有相同的布局和显示效果,无需进行缩放和滚动。

1.3K30

07-移动端开发教程-移动端视

问题:PC端设计的网页一般都是大于960px 尺寸,移动端上的浏览器为了能够将那些为PC端设计的网站正常显示,一般都给一个默认的整屏的宽度为980px(css像素),虽然能这样让移动端浏览器兼容大部分...2.2 移动端视移动端视移动端浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。...由于移动端的视可以进行放大、缩小、改变宽高,所以造成了视的大小跟屏幕能显示的内容的宽度和布局的宽度不一致,这就出现两个概念:布局视和视觉视。...视觉视是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height 2.2.2 布局视(layout viewport) 布局视:在移动端视移动端浏览器屏幕宽度不再相关联...布局视不会受到缩放的影响,缩放不会导致页面重排渲染,对于移动端宝贵的性能来说非常重要。

1.5K80
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    07-移动端开发教程-移动端视

    问题:PC端设计的网页一般都是大于960px 尺寸,移动端上的浏览器为了能够将那些为PC端设计的网站正常显示,一般都给一个默认的整屏的宽度为980px(css像素),虽然能这样让移动端浏览器兼容大部分...2.2 移动端视移动端视移动端浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。...由于移动端的视可以进行放大、缩小、改变宽高,所以造成了视的大小跟屏幕能显示的内容的宽度和布局的宽度不一致,这就出现两个概念:布局视和视觉视。...视觉视是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height 2.2.2 布局视(layout viewport) 布局视:在移动端视移动端浏览器屏幕宽度不再相关联...布局视不会受到缩放的影响,缩放不会导致页面重排渲染,对于移动端宝贵的性能来说非常重要。

    1.9K120

    浅谈移动端中的视(viewport)

    移动端则较为复杂,它涉及到三个视:布局视(Layout Viewport)、视觉视(Visual Viewport)和理想视(Ideal Viewport)。 本文主要讨论移动端中的视。...1.2 三种视 移动端浏览器通常宽度是 240px~640px,而大多数为 PC 端设计的网站宽度至少为 800px,如果仍以浏览器窗口作为视的话,网站内容在手机上看起来会非常窄。...因此,引入了布局视、视觉视和理想视三个概念,使得移动端中的视与浏览器宽度不再相关联。...布局视(layout viewport) 一般移动设备的浏览器都默认设置了一个 viewport 元标签,定义一个虚拟的布局视(layout viewport),用于解决早期的页面在手机上显示的问题...如果要显式设置布局视,可以使用 HTML 中的 meta 标签: "viewport" content="width=400"> ? 布局视使视移动端浏览器屏幕宽度完全独立开。

    2.2K20

    第118天:移动端开发——视

    移动端视的分类说明。...所以,移动端浏览器厂商必须保证即使在窄屏幕下我们的页面可以展示的很好,他们将视的宽度设计得比屏幕宽度宽出很多。这样。在移动端,视移动端浏览器屏幕宽度就不再关联,而是完全独立的了。...但我们不能完全忽视移动设备上的屏幕尺寸。所以该说明一下视觉视了。 视觉视是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视,同时不会影响布局视。布局视还是保持在原来的宽度。...介绍了三种视 布局视:不再与移动端浏览器相关联,完全是独立的。实际上布局视的宽度要比屏幕宽出很多。 视觉视:用户看到的网站展示区域,一般视觉视和设备宽度一致。...理想视:为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视标签通知浏览器操作。使用它配合css媒体查询制定移动端展示方案。

    95020

    北京移动全网优惠_随着竞争的加剧

    移动北京公司市场部负责人介绍,5月23日公司正式推出了全球通标准资费“被叫全免计划”。自即日开始,北京地区的全球通客户切实实现被叫免费,接听时间没有限制,进一步呼应了社会的期盼。...2006年5月,中移动北京区资费下调,被叫套餐接近单向收费。在信产部2006年12月表示鼓励运营商实行单向收费后,中移动先后在广州、北京先后推出单向收费套餐。...北京移动推出的“被叫全免计划”,免除了客户接听电话的费用,让广大客户畅享“移动新生活”,从此可以享受在业务上的便捷与资费上的实惠。   ...虽然北京移动的这项举措是“破冰之举”,但也有让消费者略感遗憾的地方。如果选择这一计费方式的北京全球通用户在外地接听电话,将同时缴纳被叫和漫游费用。   ...作为中国移动的老对手,中国联通对移动这次“突袭”表现冷静。   5月23日,针对北京移动全球通品牌实行被叫免费接听,北京联通相关人士表示,正在研究对策。他说,北京联通其实早已实现无条件单向收费。

    55920

    北京铁通亦庄瀚维云数据中心落成,节能高效助力IDC云化大步向前

    据机房360报道,6月18日,北京铁通亦庄瀚维云数据中心落成仪式在京隆重召开,铁通集团携手合作伙伴北京互联港湾公司向大家分享北京铁通亦庄瀚维云数据中心的战略意义与建设情况,引发业内对数据中心绿色节能的高度关注...8级、地面承重14KN/㎡,高于移动集团最高规格数据中心10KN/㎡的承重标准。...该数据中心是开发区内唯一一个实现真正双市电引入的数据中心,运行环境一流,设备设施完备,传输资源丰富,电力保障充足,配备的柴油发电机组可满足连续8小时的电力供应,可为IDC业务提供一个优质、稳定的运行平台...北京铁通亦庄瀚维云数据中心实现冷通道封闭,实现制冷利用率更佳 强强联手,优质网络助力IDC业务云化 作为北京铁通的合作伙伴,互联港湾在IT领域深耕多年,逐步提升专业水平,累积优渥资源,有效降低IT运营成本...互联港湾的IDC+SDN服务有效的解决了客户一地部署全球覆盖的业务需求,目前已经在北京、上海、广州拥有自主的独立的BGP网络,在全国拥有MPLS骨干网。

    94230

    大众点评发布必吃榜 大数据带动消费升级

    2017全国必吃50餐厅”名单随之揭晓:上海新荣记南京西路688店、北京聚宝源牛街北店、广州翠园太古汇店、南京李记清真馆、重庆尘香等深受用户好评的餐厅纷纷上榜。...其中,收录时间最长的餐厅持续了156个月,为北京四季民福烤鸭店灯市店和上海成隆行蟹王府南京东路店。 价格方面,上榜餐厅人均消费跨度大。...菜系方面,上榜餐厅既涵盖了粤菜、本帮江浙、川菜、北京菜、湖北、陕、清真、天津等各地风味,也囊括了火锅、西餐、小吃、创意、素菜、日本料理等美食新锐。...其中,排在前三位的菜系分别是粤菜(占比18%)、本帮江浙(占比16%)、火锅(占比14%)。...城市方面,上榜餐厅中既有北京、上海、广州等一线城市,也有成都、重庆、西安、等传统美食之都,以及杭州、南京、天津、武汉、苏州等有影响力的省会城市及新一线城市。

    88060

    移动端网页布局】移动端网页布局基础概念 ③ ( meta 视标签简介 | 利用 meta 视标签 设置 网页宽度 是否允许用户缩放 初始缩放比例 最小缩放比例 最大缩放比例 )

    一、meta 视标签简介 ---- meta 视标签 就是为了移动端而设计的 , 该设置只有在移动端生效 ; meta 视标签 用于设置 浏览器 按照 理想视 显示页面 ; 使用 meta 视标签...---- 1、不设置 meta 视标签代码示例 如果 不设置 meta 视标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; 代码示例...: 如果 不设置 meta 视标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; body 中的文本 会缩小到很小的大小 ;...2、设置 meta 视标签代码示例 设置 meta 视标签 , 在移动端 默认的 网页宽度 为 设备宽度 , 是理想视 ; body 中的文本 显示正常 ; 推荐视标签写法 : 所有的手机端网页都设置如下样式...: 设置 meta 视标签 , 在移动端 默认的 网页宽度 为 设备宽度 , 是理想视 ; body 中的文本 显示正常 ;

    3.8K21

    城市 | 京城潮人爱Champion胜过Supreme;卡丁车馆比健身房更有人气

    大数据文摘授权转载自第一财经商业数据中心 《北京北京》听多了,孤不打一处来; 《北京女子图鉴》看完了,社会的残酷迎面袭来。 而北京就只有孤与苦吗?...北京消费气质面面观 潮流、饮食、文化、生活、养生 提起北京,你的印象是什么?...老北京布鞋、北京烤鸭、稻香村、全聚德、京八件、卤煮......似乎往回退十年,代表北京的关键词依然是以上这些,难道北京就没变过?...爽辣川菜就该配本土二锅头 根据CBNData《报告》中来自口碑的数据显示,“重”的川菜是北京人最爱的中餐,而农家、闽菜和晋则是2017-2018年订单增速排名前三的菜系。...而“重自然也少不了“重”酒,相较于对葡萄酒偏爱有加的上海消费者,北京消费者更好浓香型白酒。从2017-2018年最受北京消费者欢迎的国产白酒品牌来看,本土品牌牛栏山和红星位居前两位。

    55710

    Qualcomm x UCCVR全球移动VR内容竞赛北京站技术分享沙龙圆满举行

    随着移动VR 2.0时代帷幕的拉开,基于骁龙VR平台在移动领域强大卓越的性能表现,未来将涌现更多基于骁龙VR平台,面向移动VR、一体机开发内容的团队。...掌握高通骁龙VR平台的应用开发技巧,学习精品移动VR/AR内容开发的经验,了解市场和行业的最新动态,成为移动VR 2.0时代绕不开的话题。 ?...12月28日,Qualcomm 与UCCVR联合举办的“移动VR 2.0时代技术赋能—全球移动VR内容竞赛北京站技术分享沙龙”圆满举行。...这些都是移动VR产品成功不可或缺的要素。 ? 移动VR/AR内容开发经验 资深移动VR/AR开发者,镜匙科技CEO王星杰分享了在移动VR/AR内容开发的过程中需要注意的细节。...作为GCC全球创想家系列沙龙中的一站,北京站沙龙吸引了众多行业从业者的关注。目前,创想家系列活动影响力范围已经覆盖国内外各大城市,辐射超过5万多名相关从业者。

    72970

    2000万人的大北京,上下班原来是这样的(附超炫蝌蚪图)

    随着北京城市化和现代化发展进程加快,通勤交通流量的空间分布出现了区域间的分化和区域性的特征。今天,我们用滴滴出行大数据为你重构北京的通勤交通。 ▎职住分离与高通勤成本 ? ?...图1-2 北京早晚高峰通勤流动图 上面的两张动态图,分别截取了早八点和晚六点时段的20分钟内,北京上班族使用滴滴出行的通勤流动示意图。...图3 北京早高峰通勤终点分布 近年来,北京城市空间规模迅速扩张,呈现职住分离和就业多中心的发展趋势。...图4 北京早高峰通勤起点分布 伴随着常住人口和就业总量的高速增长、以及中心城区密度的攀升,北京中心城外围的近郊区成为人口居住集聚区。...每天早高峰降临前,数十万燕郊通勤族跨越白河涌入北京,去往各自办公地所在的就业集聚区。 表1 北京各居住区早高峰通勤对比 ?

    41730

    布局比利润重要看浪潮的互联网思维战略

    2月4日,浪潮在北京召开了主题为“融合•让未来重新定义”的SmartRack整机柜服务器产品策略发布会。...另据市场研究机构IDC的数据显示,2010年到2014年中国市场传统型X86服务器的年复合增长率达17.5%,而整机柜服务器产品的复合增长率则高达58.8%。...IDC预测,未来四年整机柜服务器在X86服务器的总体占比将进一步提升,并保持两位数的高速增长势头。...自从由百度、阿里巴巴、腾讯牵头发起,后中国移动、中国电信、工信部电信研究院加入,由英特尔担任技术顾问的开放数据中心委员会(原天蝎联盟)以来,浪潮一直致力于推动整机柜服务器在中国的领先应用,虽然后来天蝎计划一变再变...可是风暴在哪儿呢?雷军只告诉,“只要站在风口上,猪也能飞起来”。而浪潮认为未来风暴就在互联网行业。浪潮之所以如此如此重视SmartRack整机柜服务器,也是浪潮在互联网思维下的思考和谋划。

    84441

    从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,视,屏幕适配

    真机调试必须保证移动设备同服务器间的网络是相通的。 三、视(viewport)是用来约束网站中最顶级块元素的,即它决定了的大小。...2、移动设备 移动设备屏幕普遍都是比较小的,但是大部分的网站又都是为PC设备来设计的,要想让移动设备也可以正常显示网页,移动设备不得不做一些处理,通过上面的例子我们可以知道只要viewport足够大,就能保证原本为...PC设备设计的网页也能在移动设备上正常显示,移动设备厂商也的确是这样来处理的。...1、layout viewport(布局视)指的是我们可以进行网页布局区域的大小,同样是以CSS像素做为计量单位,可以通过下面方式获取 /* 获取layout viewport */ document.documentElement.clientWidth...2、ideal viewport(理想视)设备屏幕区域,(以设备独立像素PT、DP做为单位)以CSS像素做为计量单位,其大小是不可能被改变,通过下面方式可以获取。

    79021

    高度 满足客户所需 态度 互联港湾的崛起之路

    北京互联港湾科技有限公司成立于2009年,是一家专业从事互联网基础服务提供商的高新技术企业,主营业务为互联网数据中心服务(IDC及其增值服务)以及云计算技术服务。...互联港湾拥有全网IDC、ISP牌照,同时互联港湾还是CNNIC和APNIC会员单位,拥有独立的IP地址段及AS号。...通过与中国联通、 中国电信、中国移动、中国铁通、科技网、教育网等各大电信运营商的长期紧密合作,公司整合了各大运营商的优势资源,为客户提供优质网络服务。...作为专业 IDC服务商,公司运营了超过10个A类数据中心,管理服务器超过10000台,带宽总量超过200G。...互联港湾的IDC+SDN服务有效的解决了客户一地部署全球覆盖的业务需求,目前已经在北京、上海、广州拥有自主的独立的BGP网络,在全国拥有MPLS骨干网。 ---- ? ?

    85020

    活动推荐|下周(12.10-12.16)第十三届中国IDC产业年度大会

    --- 镁客网硬科技领域优质活动周榜 --- 本周共有三个活动入榜: 1、第十三届中国IDC产业年度大会 2、2018钛媒体T-EDGE全球创新大会 3、2018数字中国未来趋势发展论坛 ?...一、第十三届中国IDC产业年度大会 时间:2018.12.11--2018.12.13 地点:北京 活动链接: http://idcc.idcquan.com/ 大会介绍:本次大会即将聚焦行业热点,并共同探讨数据中心...、云计算、大数据、人工智能等前沿科技,为IDC企业、电信运营商、互联网企业和IT厂商搭建高效沟通与交流的平台,共同推动中国IDC产业的健康发展,加速中国企业的数字化转型进程。...二、2018钛媒体T-EDGE全球创新大会 时间:2018.12.14--2018.12.16 地点:北京 活动链接: http://www.tmtpost.com/event/t-edge/2018winter...三、2018数字中国未来趋势发展论坛 时间:2018.12.15--2018.12.16 地点:上海 大会介绍:本次论坛由财讯传媒集团、上海移动互联网应用促进中心、人工智能国际联合实验室加州伯克利中心,

    38620

    CDN关键技术研究与应用 — 内容路由技术

    从对比中可以看出,传统CDN的扩展成本较高,如果要扩展一个点就需要对此进行相应建设,建设CDN要以IDC为条件。国内的IDC节点在三四线城市相对匮乏,扩展成本较高。...上图中列出的关键指标会影响到用户的使用体验,从网络方面来讲,服务器网状态、接入交换机状态、IDC出口状态、线路状态等都是需要考虑的内容。...2.3.4 Anycast——统一出 ?...特殊场景举例 3.1 移动场景下内容路由 ? 相对有线网络,移动网络CDN加速实现更加复杂,随着无线网络技术的发展,移动网络中内容加速技术也随之发生改变。...2019年第一季度,爱奇艺和中国联通北京公司联合测试,通过奇速播落地5G场景,提供了VR视频、8K视频的极速播放体验,VR视频和8K视频这类高码流的技术应用在5G场景有更显著的播放效果。

    2.3K60
    领券