精华内容
下载资源
问答
  • 主要介绍了网页宽度自动适应手机屏幕宽度的实现代码,需要的朋友可以参考下
  • 主要介绍了移动开发之自适应手机屏幕宽度的相关资料,网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方,需要的朋友可以参考下
  • 主要介绍了HTML5 移动页面自适应手机屏幕宽度的相关资料,需要的朋友可以参考下
  • 在浏览器端调试时页面和移动手机端页面的宽度大于手机屏幕宽度 html页面使用《meta》标签控制 一般,我们使用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-...

    在浏览器端调试时页面和移动手机端页面的宽度大于手机屏幕宽度

    html页面使用《meta》标签控制

    一般,我们使用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">标签
    其中各个含义

    name="viewport"字面上的意思是可视窗口界面的含义
    content="width=device-width"我们可以理解为浏览器的可视虚拟窗口界面的宽度等于我们移动设备的界面宽度
    initial-scale=1初始化缩放值为1,即不缩放
    maximum-scale=1最大缩放值是1,即不缩放
    minimum-scale=1最小缩放值是1,即不缩放
    user-scalable=no/0用户是否可以缩放,no和0都代表不可以缩放,其实设置用户是否可缩放就可以不设置最大和最小的缩放了
    

    按照以上设置就可以适配屏幕的大小了

    展开全文
  • 今天首次开始接触移动端页面,然后就发现一个让我百思不得其解的问题,如图 ,![图片说明]... 明明手机屏幕宽度是375,但是页面宽度确实750,这是为什么呢? 怎么造成的呢?
  • html网页宽度自动适应手机屏幕宽度的方法

    html网页宽度自动适应手机屏幕宽度的方法


          web项目中经常会出现html页面需要自适应手机屏幕的情况。

       

          可以通过设置屏幕的缩放比例来实现:

          一、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

         (1)、通过设置请求头实现:

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

    在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

    其中:

    width=device-width :表示宽度是设备屏幕的宽度

    initial-scale=1.0:表示初始的缩放比例

    minimum-scale=0.5:表示最小的缩放比例

    maximum-scale=2.0:表示最大的缩放比例

    user-scalable=yes:表示用户是否可以调整缩放比例




    如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:


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

    这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。


        (2)、js动态生成mate标签

        content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。


    <script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>


    对于此标签还有以下需要分享:

    1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

    2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

    3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

    4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

    以上是使用viewport标签的一些小体会,分享给大家。


    二、百分比法,首先应明确一个概年,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

     

    三、使用css3单位rem,有人这样解释rem,root-em,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

    解释一下为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。所以会在头部加上这个JS代码


    <script type="text/javascript">
       var html = document.querySelector('html');
       var rem = html.offsetWidth / 6.4;
       html.style.fontSize = rem + "px";
    </script>


    四、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。


    展开全文
  • 移动页面自适应手机屏幕宽度

    千次阅读 2017-05-22 10:56:23
    关于移动页面自适应手机屏幕宽度的一点总结【站在巨人的肩膀上】 使用meta标签 最常用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有...

    关于移动页面自适应手机屏幕宽度的一点总结【站在巨人的肩膀上】

    使用meta标签

    最常用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

    标签如下

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

    解释

    content中的“width” 这个width指的是什么宽度?

    有几个选择:

    1. 列表内容
    2. 虚拟窗口的宽度
    3. 手机屏幕的宽度
    4. 页面的宽度

    根据我的试验得这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例。
    是虚拟窗口宽度 / 页面宽度

    这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。

    需要注意的点

    1:user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

    2:initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

    3:手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

    4:如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

    以上是使用viewport标签的一些小体会,分享给大家。

    2、百分比法,首先应明确一个概念,CSS中的百分比中的百指的是什么,我告诉你指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    3、使用css3单位rem,有人这样解释rem【root-em】,就是根部的em,想必em大家都懂的,那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。
    当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。到这里我们也就了解了rem的用法了。
    那么怎么用rem来实现不同尺寸屏幕的自适应呢?
    在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅)。
    假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100。
    px与rem之间很好换算,除以100就可以。
    这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size。
    计算:
    100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

    为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。

    5、媒体查询,媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class=”icon”的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};

    展开全文
  • 网页宽度自动适应手机屏幕宽度的方法 原文: 网页宽度自动适应手机屏幕宽度的方法 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-...
    原文: 网页宽度自动适应手机屏幕宽度的方法

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


     

    在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

    其中:

    width=device-width :表示宽度是设备屏幕的宽度

    initial-scale=1.0:表示初始的缩放比例

    minimum-scale=0.5:表示最小的缩放比例

    maximum-scale=2.0:表示最大的缩放比例

    user-scalable=yes:表示用户是否可以调整缩放比例

     

    如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:

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


    这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    posted on 2015-06-27 11:11 NET未来之路 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/lonelyxmas/p/4603779.html

    展开全文
  • 移动页面自适应手机屏幕宽度HTML5开发
  • js获取手机屏幕宽度、高度

    万次阅读 2018-07-03 11:24:30
    js获取手机屏幕宽度、高度 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body...
  • 移动端H5页面自适应手机屏幕宽度

    万次阅读 2018-01-26 11:23:37
    移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果。 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem.sublime-settings文件...
  • 热门标签的自动折行,会随着手机屏幕宽度的改变而改变。如果iphone5的宽度可以显示5个标签,那么第6个就会在第2行,而在iphone6sp上一行就会显示6个,第7个才会折行。并且把核心的代码抽了出来,以方便在各个控制器...
  • 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom的宽度即html的宽度与手机屏幕的宽度对比,如果两者不等,直接给html的font-size设置成真实手机...
  • js获取手机屏幕宽度、高度 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body....
  • &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, ...在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕宽度。 其中: width=device-width :表示宽...
  • 计算手机屏幕宽度

    2020-07-14 10:45:06
    Resources resources = getContext().getResources(); DisplayMetrics dm = resources.getDisplayMetrics(); int widthMax = (dm.widthPixels);
  • HTML5写手机页面,读取图片,如果图片大于手机屏幕宽度,就显示100%屏幕,如果小于,就显示原图。 CSS的max-width就能实现了,切不要设置img的宽和高。比如图片宽度你可以做成1080,或680都可以。 1 ...
  • 1.获取Android 手机屏幕宽度 1 DisplayMetrics dm = new DisplayMetrics(); 2 this.getWindowManager().getDefaultDisplay().getMetrics(dm); 3 Toast.makeText(getApplicationContext(), dm.widthPixels + "-...
  • 如果要适应手机宽度,不能压缩或者拉伸图片的话,只能显示部分图片,长于手机屏幕的部分会被截取。如果要适应手机宽度,又要全部显示图片,只能压缩图片。如果不能压缩或者拉伸图片,又要全部显示图片,那么适应不了...
  • Android.util的DisplayMetrics对象记录了一些常用的信息,包含了显示信息、大小、维度、...通过DisplayMetrics可以得到屏幕宽度和高度。 代码如下: DisplayMetrics dm = new DisplayMetrics(); getWindow...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,117
精华内容 1,246
关键字:

手机屏幕宽度