`

移动端页面适配 - viewport篇

 
阅读更多

    <meta name="viewport" id="viewport"

      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- 设置默认viewport属性为:设备宽度,初始化缩放为正常大小,最大缩放为正常,不允许用户缩放 -->

<script type="text/javascript">

    var clientWidth = document.documentElement.clientWidth,

            viewport = null,

            viewportWidth = 'device-width',

            viewportScale = 1;

    if (clientWidth > 320) {

        viewport = document.getElementById('viewport');

        viewportScale = clientWidth / 320;

        viewportWidth = 320 * (320 / clientWidth);

        viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');

    }

</script>

<!-- 默认页面宽度为320px, 如果设备宽度大于320px,则计算缩放比例,重新设置viewport属性值 -->

<meta name="format-detection" content="telephone=no,email=no,address=no"/>

<!-- 禁用默认手机号码及地址在手机浏览器中的默认点击效果,如:拨打电话等效果 -->

 

分享到:
评论

相关推荐

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

    ### 移动端适配解决方案:rem与vw详解 #### 一、引言 随着移动互联网的迅速发展,用户越来越依赖于移动设备访问网站或应用。为了提供良好的用户体验,前端开发者需要确保页面能够适应不同尺寸的屏幕。在众多适配...

    前端移动Web第一天:京东移动端首页案例-流式布局.zip

    7. **Viewport Meta标签**:在移动设备上,`&lt;meta name="viewport" content="..."&gt;`标签用来控制页面的视口大小,对于优化移动Web体验至关重要。 8. **JavaScript适配**:除了CSS,JavaScript也可以用于动态调整...

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

    "手淘解决移动端适配问题(flexible)"的方案是阿里巴巴手淘团队提出的一种高效、灵活的移动端适配策略,旨在帮助开发者解决不同设备屏幕尺寸下页面布局的适配问题。这个方案主要包括两个核心部分:CSS和JavaScript...

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

    在移动端开发领域,适配问题是一项至关重要的任务,特别是在手机和平板设备上,由于屏幕尺寸、分辨率和像素密度的多样性,使得开发者需要采用特定的策略来确保应用或网站在不同设备上都能提供良好的用户体验。...

    01-移动端click-300ms-延迟.md

    然而,在移动网页和PC网页设计已经有所区分,且移动端响应式布局广泛使用的当下,这一300ms的延迟变得多余,因为它降低了用户的交互体验,尤其是对前端页面响应速度有较高要求的场景。 移动端click-300ms延迟的解决...

    前端-移动端布局-案例

    - 优化性能,如减少HTTP请求、压缩CSS和JavaScript、使用雪碧图等技术,提升移动端页面加载速度。 总的来说,移动端布局是前端开发者必备的技能之一。通过理解并熟练运用上述知识点,你可以创建出既美观又实用的...

    一种便捷的移动端屏幕适配解决方案

    在移动端应用开发中,屏幕适配是一个至关重要的环节,它涉及到如何确保应用在不同尺寸、分辨率的设备上都能提供良好的用户体验。"一种便捷的移动端屏幕适配解决方案"着重解决这个问题,尤其是在JavaScript开发环境下...

    vue 移动端适配.md

    在开发基于Vue.js的移动应用时,为了确保页面在不同尺寸的设备上都能呈现出良好的视觉效果,我们需要进行适当的移动端适配。移动端适配通常涉及到布局调整、图片自适应以及字体大小的变化等多方面内容。 #### 二、...

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

    本压缩包文件“移动端Web页面适配方案.zip”内可能包含了一些示例代码(SJT-code),旨在帮助开发者理解并实施这些策略。以下是一些关键的知识点: 1. **响应式设计(Responsive Design)**:响应式设计是移动Web...

    移动端适配方案.doc

    移动端适配方案 移动端适配方案是指在移动设备上显示网页内容的技术方案,旨在解决移动端屏幕尺寸和像素密度的差异对网页显示的影响。下面是相关的知识点: 1. 像素视口概念 * 像素是屏幕上一个个发光的小点,...

    Fixedw4vp.js 用于在移动端页面开发中精准还原UI设计图与移动端适配的解决方案.zip

    《Fixedw4vp.js在移动端页面开发中的应用与适配策略》 在移动互联网时代,网页设计和开发面临着一个重大挑战:如何确保在各种不同尺寸的设备上,UI设计图能够精准还原并实现良好的用户体验。Fixedw4vp.js,一个专门...

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

    在移动端开发中,适配问题是一项重要的任务,尤其是在使用Vue CLI3构建项目时。本文将详细介绍如何使用Vue CLI3进行移动端适配,主要涉及两种方法:`lib-flexible` 和 `postcss-plugin-px2rem`。 首先,确保你的...

    移动端适配详细操作教程.pdf

    此外,VW(viewport width)、 VH(viewport height)等相对单位也是移动端适配的重要工具,它们可以帮助开发者动态调整元素大小,使其适应不同的屏幕尺寸。 综上所述,移动端适配涉及多个方面,包括对屏幕尺寸、...

    html5移动端适配案例

    以上就是关于“html5移动端适配案例”的核心内容,包括HTML5的viewport设置、CSS媒体查询、JavaScript响应式处理和响应式图片策略。这些技术组合在一起,能有效地帮助开发者构建出在各种移动设备上都能良好展示的...

    lib-flexible 移动端适配解决方案

    在移动端开发中,适配不同尺寸的屏幕是一个重要的任务,lib-flexible 是一个常见的解决方案,主要解决了移动设备上的页面布局和元素尺寸的问题。这个库基于 Flexible Box Layout(Flexbox)模型,结合了“viewport ...

    vue移动端h5页面根据屏幕适配的四种方案.docx

    Vue 移动端 H5 页面屏幕适配四种方案 在移动端 H5 页面开发中,屏幕适配是一个非常重要的方面。不同的屏幕尺寸和设备像素比都需要不同的适配方式。下面我们将介绍四种常见的屏幕适配方案。 方案一:淘宝开源的可...

    移动端网页/网页适配

    在移动端网页设计中,网页适配是一个至关重要的概念,它涉及到如何确保网页内容在不同尺寸的设备上,如手机、平板电脑甚至智能手表等,都能呈现出清晰、易读且用户体验良好的效果。随着移动互联网的快速发展,设计师...

    详解vue移动端项目的适配(以mint-ui为例)

    本篇文章将基于Mint-UI库详细讲解如何进行移动端适配。 首先,使用`vue-cli`创建项目骨架,这一步是搭建Vue项目的基础,但在这里不再详述。接下来,我们将关注适配的具体步骤。 **1. REM适配** REM(Root EM)...

    重置样式表reset.css和用于移动端适配的flexible.js

    reset.css帮助开发者摆脱浏览器默认样式的困扰,而flexible.js则提供了强大的移动端适配能力,让页面能在各种设备上呈现出良好的用户体验。了解并掌握这两项技术,对于提升网站的兼容性和用户体验至关重要。

    移动端页面1

    "移动端页面1"的描述中提到了几个关键点,主要涉及到移动端适配和CSS像素比的概念。 首先,描述中提到在980视口下的问题。在桌面端,通常会设计宽度为980像素或更宽的页面,以适应大屏幕。但在移动设备上,这样的...

Global site tag (gtag.js) - Google Analytics