`

移动页面适配-viewport缩放

 
阅读更多

移动端适配方案1,  采用一个基准宽,对当前viewport进行缩放

相关代码如下:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <script type="text/javascript">
        var clientWidth = document.documentElement.clientWidth,
                viewport = null,
                viewportWidth = 'device-width',
                viewportScale = 1,
                normalWidth = 2048;
        if (clientWidth > normalWidth) {
            viewport = document.getElementById('viewport');
            viewportScale = clientWidth / normalWidth;
            viewportWidth = normalWidth * (normalWidth / clientWidth);
            viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
        }else if(clientWidth < normalWidth){
        	viewport = document.getElementById('viewport');
            viewportScale = clientWidth / normalWidth;
            viewportWidth = normalWidth * viewportScale;
            viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
        }
    </script>

 

分享到:
评论

相关推荐

    前端开源库-viewport-list

    5. **动态适配**:监测视口变化,比如横竖屏切换或窗口缩放,实时更新页面布局。 在使用viewport-list库时,首先需要引入该库的JavaScript文件,然后调用提供的API来获取设备视区列表。例如,可能有一个`...

    一次讲清移动端适配解决方案-rem和vw.docx

    随着移动互联网的迅速发展,用户越来越依赖于移动设备访问网站或应用。为了提供良好的用户体验,前端开发者需要确保页面能够适应不同尺寸的屏幕。在众多适配方案中,rem和vw是最常用的两种方法。本文将详细介绍这两...

    图文并茂让你必须弄懂viewport配套示例代码.rar

    视口是Web浏览器显示网页内容的可视区域,尤其在移动设备上,它的重要性不言而喻,因为屏幕尺寸各异,如何适配不同设备的视口,使得网页内容能正确、美观地呈现,是前端开发者面临的重要任务。 【标签】"viewport...

    h5页面适配

    通过在HTML头部添加`&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;`,我们可以让页面宽度与设备宽度相匹配,初始缩放比例为1,确保页面按比例缩放。 4. **相对单位**:使用相对单位如em、...

    利用css @viewport 做设备适配

    总结来说,`@viewport`是CSS中用于设备适配的一种新方法,旨在提供更标准、更灵活的方式来控制不同设备上的页面布局。尽管目前浏览器支持状况不一,但随着技术的发展,它可能会成为未来响应式设计的标准工具。对于...

    通过viewport实现jsp页面支持手机缩放

    "通过viewport实现jsp页面支持手机缩放"这一主题,正是解决这个问题的关键技术之一。Viewport是浏览器为移动设备提供的一种机制,用于控制网页在小屏幕上如何显示。 首先,我们需要理解什么是viewport。在Web浏览器...

    js实现整体缩放页面适配移动端

    js实现整体缩放页面适配移动端的方法,是使用JavaScript来控制整个页面的缩放级别,从而实现不同设备上的适配。这种方法相比传统的媒体查询(Media Queries)可以更加灵活地对页面进行缩放控制,尤其是在需要对页面...

    Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    **配置viewport**:在`index.html`中,设置`&lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;`,确保页面在不同设备上正确缩放。...

    rem布局实现不同分辨率移动终端的自适应、整体缩放

    REM布局是一种在Web开发中广泛使用的响应式设计技术,它能够帮助开发者实现页面在不同分辨率的移动设备上自适应显示,确保用户界面在各种屏幕尺寸下都能保持良好的可读性和视觉一致性。REM(Root Em)是以根元素...

    移动端Web页面适配方案.zip

    1. **响应式设计(Responsive Design)**:响应式设计是移动Web适配的基础,它允许页面根据用户设备的屏幕大小和方向进行动态调整。这一概念的核心是媒体查询(Media Queries),通过设置断点来定义不同设备视口下的...

    移动端手机和平板适配解决方案

    它可能包含了动态设置根元素字体大小的功能,从而影响整个页面的缩放比例,实现不同设备的适配。例如,`flexible.js`通常会结合`lib-flexible`使用,通过设置`body`的`font-size`来作为布局的基础。 7. **viewport...

    使用Flexible实现手淘H5页面的终端适配1

    本文将深入探讨如何利用Flexible库来实现手淘H5页面的多终端适配,帮助开发者们在面对各种屏幕尺寸的移动设备时,能够构建出优雅且适应性强的页面。 首先,我们需要理解移动设备的适配痛点。随着智能手机型号的多样...

    viewport介绍1

    通过设置`&lt;meta name="viewport" content="..."&gt;`,我们可以控制viewport的大小和缩放行为,确保网页在不同设备上适配良好。 第二,理解CSS中的像素与设备物理像素的区别 在CSS中,1px并不总是等于设备的1个物理...

    仿手淘的h5适配方案采用rem适配页面设计稿分10等分

    在移动Web开发中,适配问题一直是个关键的挑战,特别是在设计复杂的页面布局时,如手淘这样的电商应用。为了实现跨设备、跨屏幕尺寸的良好显示效果,开发者通常会采用响应式布局策略,其中,使用`rem`单位进行适配是...

    手淘解决移动端适配问题(flexible)

    通过合理运用rem单位、媒体查询、JavaScript适配脚本以及优化的viewport设置,开发者可以构建出既美观又易用的跨平台移动网页。在实践中,开发者还需要不断学习和适应新的前端技术,如Web Components、CSS Grid、...

    移动web开发,rem适配方案

    通过`&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"&gt;`这行代码,我们可以设定布局视口宽度等于设备宽度,禁止用户缩放,保证...

    html5移动端适配案例

    这段代码告诉浏览器页面的宽度应等于设备的物理宽度,并设定初始缩放比例为1.0,不允许用户手动缩放,以保持页面的响应式布局。 接下来,我们关注`css`目录下的样式表文件。在移动端适配中,CSS3的媒体查询(`media ...

    深入理解移动前端开发之viewport

    移动前端开发中,viewport是一个至关重要的概念,尤其是在处理不同分辨率的移动设备上的网页适配问题。Viewport可以简单理解为移动设备屏幕上用于展示网页的实际可视区域,通常指的是浏览器(或App内的Webview)用于...

    移动web 第五天移动端适配

    在实际应用中,企业普遍采用`rem`作为移动适配的解决方案。然而,考虑到不同设备的分辨率和屏幕尺寸差异,我们需要用到媒体查询(`@media query`)来进一步细化样式。媒体查询可以根据设备的特定特性,如视口宽度,...

    Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip

    - `initial-scale`: 初始缩放比例,即页面加载时的缩放程度。 - `minimum-scale`: 最小缩放比例,限制用户缩放到的最小级别。 - `maximum-scale`: 最大缩放比例,限制用户缩放到的最大级别。 - `user-scalable`:...

Global site tag (gtag.js) - Google Analytics