zoukankan      html  css  js  c++  java
  • 移动web设计稿尺寸,关于移动web尺寸的那点事


    我自己的做稿子的时候,一开始就有一个习惯,先放上这段代码
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    未隐藏URL栏
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />   已隐藏URL栏
    1:1显示(initial-scale=1.0, maximum-scale=1.0),

    禁止放大缩小(user-scalable=no)
    隐藏IOS系统浏览器的URL栏目与状态栏目(minimal-ui,只有IOS7版本支持哦)


    现在就是1:1显示啦,

    移动wep肯定是用HTML5啦!!不用说的

    然后就
    alert('' + window.innerWidth + ';height:' + window.innerHeight);
    这样就能可视区域1:1的尺寸啦!!
    这样就得到机子可视区域尺寸啦!!然后直接就可以在PS或AI里面做稿喽,
    记得是72分辨率哦,

    还有一点特别注意,就是图片的问题,一定要加1倍的宽和高才能让图片特别清晰哦,优其是LOGO,这个~~你懂的~~~~~


    目前我知道的移动端可视区尺寸

    iPhone4/iPhone4s   320 * 372 / 320 * 441 (已隐藏URL与状态栏)

    iPhone5/iPhone5s   320 * 460 / 320 * 529 (已隐藏URL与状态栏)

    Note2  360 * 567   (未隐藏URL与状态栏)

    iPad 3/4   768*928   (未隐藏URL与状态栏)

    GALAXY SIII 360 * 567   (未隐藏URL与状态栏)

    小米2A 360 *567  (未隐藏URL与状态栏)
    HTC G10 320 * 460


    以上是我目前知道的,还有特别多,大家有空多打印出来,再分享出来啦,人多力量大,用的机子也不同


    听说
    window.onload = function(){
            setTimeout(scrollTo,0,0,0);
    }
    可以隐藏android和IOS系统的URL,但我一直试都不行,是我弄错了,还是机子问题,还是TM的不给力。

  • 相关阅读:
    java从Excle中读取数据集
    使用iText5实现Java打印PDF文件完整版
    layer.photos动态加载图片及静态加载图片
    html 设置th时 width无效 解决办法
    前端时间格式转换,js时间戳转时间(年-月-日 时:分:秒)
    JS选择日期控件,当前日期以后的日期不能选择
    Navicat安装和破解
    Git下载安装及Idea配置教程(亲测使用)
    maven的安装及配置
    测试面试常见问题
  • 原文地址:https://www.cnblogs.com/xingfuboke/p/4894117.html
Copyright © 2011-2022 走看看