精华内容
下载资源
问答
  • TML5 手机页面 输入表单被键盘遮挡住了 请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了? 有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的键值 是什么? 或者有什么其他方法...

    TML5 手机页面 输入表单被键盘遮挡住了

    请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了?

    有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的键值 是什么?

    或者有什么其他方法? 判断窗口尺寸改变的 size 方法无效

     

     

    没有相关的事件来获取隐藏按钮点击,keydown/keyup事件中获取到的keyCode都是0,楚了你说的前往keyCode 13.

    可以用计时器监视window.innerHeight高度改变来判断。

    下面的代码在android chrome浏览器下测试正常,javascript检查android软键盘隐藏显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <title>javascript检查android软键盘隐藏显示</title>
    <input type="text" id="txt" />
    <div id="dv"></div>
    <script>
       var timer, windowInnerHeight;
        function eventCheck(e) {
            if (e) { //click,focus事件触发的
                $('#dv').html('android键盘' + (e.type == 'click' ? '弹出' : '隐藏') + '--通过' + e.type + '事件');
                if (e.type == 'click') {//如果是点击事件启动计时器监控是否点击了键盘上的隐藏键盘按钮,没有点击这个按钮的事件可用,keydown中也获取不到keyCode值
                    setTimeout(function () {//由于键盘弹出是有动画效果的,要获取完全弹出的窗口高度,使用了计时器
                        windowInnerHeight = window.innerHeight;//获取弹出android软键盘后的窗口高度
                        timer = setInterval(function () { eventCheck() }, 100);//100ms检查下窗口高度是否改变
                    }, 500);
                }
                else clearInterval(timer);
            }
            else { //计时器执行的,需要判断窗口可视高度,如果改变说明android键盘隐藏了
                if (window.innerHeight > windowInnerHeight) {//这里逻辑可以更改下,有可能其他js事件会导致高度变化,这里就只做个简单判断了
                    clearInterval(timer);
                    $('#dv').html('android键盘隐藏--通过点击键盘隐藏按钮');
                }
            }
        }
        $('#txt').click(eventCheck).blur(eventCheck);
        //keydown/keyup获取按键值为0,keypress不执行。。
        $('#txt').keydown(function (e) { $('#dv').append('<br>keydown:' + e.keyCode); }).keyup(function (e) { $('#dv').append('<br>keyup:' + e.keyCode); }).keypress(function (e) { $('#dv').append('<br>press:' + e.keyCode); });
    </script>

     

    转载于:https://www.cnblogs.com/yangAL/p/5807619.html

    展开全文
  • 手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px。 手机型号 竖屏宽度 IPhone 5 320px IPhone 6...

    手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px。

    手机型号 竖屏宽度
    IPhone 5 320px
    IPhone 6 375px
    IPhone 6 Plus 414px
    Nexus 4 384px
    Android(大多数) 360px

    前两年,安卓的分辨率多数还是240px 或 320px,现在是360px,为了向下兼容,向上也兼容,最终将 360px 定为设计的尺寸,后期可以使用CSS3 Media Queries即媒体查询特性做进一步的兼容,兼容其他设备,以及做一些设备的横屏的兼容。

    附:屏幕尺寸测试的JS代码,如下

    <!DOCTYPE html>
    <html>
    <head>
     <title>屏幕尺寸测试</title>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    </head>
    
    <body style="padding:0px;margin:0px;" scroll="no">
    	<script language="javascript">
    		var s = "";
    		s += "网页可见区域宽:"+ document.body.clientWidth;
    		s += "<br>网页可见区域高:"+ document.body.clientHeight;
    		s += "<br>网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
    		s += "<br>网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
    		s += "<br>网页正文全文宽:"+ document.body.scrollWidth;
    		s += "<br>网页正文全文高:"+ document.body.scrollHeight;
    		s += "<br>网页被卷去的高:"+ document.body.scrollTop;
    		s += "<br>网页被卷去的左:"+ document.body.scrollLeft;
    		s += "<br>网页正文部分上:"+ window.screenTop;
    		s += "<br>网页正文部分左:"+ window.screenLeft;
    		s += "<br>屏幕分辨率的高:"+ window.screen.height;
    		s += "<br>屏幕分辨率的宽:"+ window.screen.width;
    		s += "<br>屏幕可用工作区高度:"+ window.screen.availHeight;
    		s += "<br>屏幕可用工作区宽度:"+ window.screen.availWidth;
    		s += "<br>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
    		s += "<br>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
    		document.write(s);
    	</script>
    </body>
    </html>

    转载于:https://www.cnblogs.com/yimuzanghua/p/9055350.html

    展开全文
  • 手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px。

    手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px。

    手机型号 竖屏宽度
    IPhone 5 320px
    IPhone 6 375px
    IPhone 6 Plus 414px
    Nexus 4 384px
    Android(大多数) 360px

    前两年,安卓的分辨率多数还是240px 或 320px,现在是360px,为了向下兼容,向上也兼容,最终将 360px 定为设计的尺寸,后期可以使用CSS3 Media Queries即媒体查询特性做进一步的兼容,兼容其他设备,以及做一些设备的横屏的兼容。


    附:屏幕尺寸测试的JS代码,如下

    <!DOCTYPE html>
    <html>
    <head>
        <title>屏幕尺寸测试</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    </head>
    
    <body style="padding:0px;margin:0px;" scroll="no">
    	<script language="javascript">
    		var s = "";
    		s += "网页可见区域宽:"+ document.body.clientWidth;
    		s += "<br>网页可见区域高:"+ document.body.clientHeight;
    		s += "<br>网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
    		s += "<br>网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
    		s += "<br>网页正文全文宽:"+ document.body.scrollWidth;
    		s += "<br>网页正文全文高:"+ document.body.scrollHeight;
    		s += "<br>网页被卷去的高:"+ document.body.scrollTop;
    		s += "<br>网页被卷去的左:"+ document.body.scrollLeft;
    		s += "<br>网页正文部分上:"+ window.screenTop;
    		s += "<br>网页正文部分左:"+ window.screenLeft;
    		s += "<br>屏幕分辨率的高:"+ window.screen.height;
    		s += "<br>屏幕分辨率的宽:"+ window.screen.width;
    		s += "<br>屏幕可用工作区高度:"+ window.screen.availHeight;
    		s += "<br>屏幕可用工作区宽度:"+ window.screen.availWidth;
    		s += "<br>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
    		s += "<br>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
    		document.write(s);
    	</script>
    </body>
    </html>

    原文:屏幕尺寸测试,测试手机的实际显示页面的宽度

    另外还有一篇文章大家也可以参考一下:手机端网页设计尺寸,H5页面设计稿规范

    展开全文
  • 简单图像延迟加载和淡入淡出 最快和最简单的网站性能优化之一是减少图像加载。 这意味着很多事情,包括使用... 如果您没有显式设置图像尺寸,则页面仍会随机播放,但是淡入确实提供了一点点的类。 我已经看到许...

    安卓手机加载淡入淡出效果

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just appear out of nowhere which is why I love the fading in route.  The page still shuffles if you aren't explicitly setting image dimensions but the fade in does provide a tiny bit of class.  I've seen many solutions which accomplish this (some not very good, like my old method) so I thought I'd share my current implementation.

    最快,最简单的网站性能优化之一是减少图像加载。 这意味着很多事情,包括使用ImageOptim和TinyPNG之类的工具缩小图像,使用数据URI和Sprite以及延迟加载图像。 当您懒惰地加载图像时,它们有点无聊,它们只是从无处出现,这就是为什么我喜欢沿途褪色的原因。 如果您没有显式设置图像尺寸,则页面仍然会打乱,但是淡入确实提供了一点点的类。 我已经看到许多解决方案可以做到这一点(有些方法不是很好,就像我的旧方法一样),所以我想我会分享当前的实现。

    HTML (The HTML)

    We'll start by putting together the image tag with specifics:

    我们将首先将image标签与具体细节放在一起:

    
    <img data-src="/path/to/image.jpg" alt="">
    
    
    

    Use data-src to represent the eventual URL.

    使用data-src表示最终的URL。

    CSS (The CSS)

    Any image with a data-src attribute should start as invisible and eventually transition the opacity:

    具有data-src属性的任何图像均应以不可见开始,并最终转变为不透明性:

    
    img {
    	opacity: 1;
    	transition: opacity 0.3s;
    }
    
    img[data-src] {
    	opacity: 0;
    }
    
    
    

    You can probably guess at this point what we'll be doing with that attribute when an image loads...

    您可能会猜到这一点,当图像加载时,我们将如何处理该属性...

    JavaScript (The JavaScript)

    ...which is removing the data-src attribute when the image has loaded:

    ...这将在加载图像后删除data-src属性:

    
    [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
    	img.setAttribute('src', img.getAttribute('data-src'));
    	img.onload = function() {
    		img.removeAttribute('data-src');
    	};
    });
    
    
    

    This solution does require JavaScript as a few of you have pointed out. For a fallback solution you could do this:

    正如您所指出的那样,此解决方案确实需要JavaScript。 对于后备解决方案,您可以执行以下操作:

    
    <noscript data-src="/path/to/image.jpg">
    <img src="/path/to/image.jpg" data-src="" alt="">
    </noscript>
    
    
    
    
    [].forEach.call(document.querySelectorAll('noscript'), function(noscript) {
    	var img = new Image();
    	img.setAttribute('data-src', '');
    	img.parentNode.insertBefore(img, noscript);
    	img.onload = function() {
    		img.removeAttribute('data-src');
    	};
    	img.src = noscript.getAttribute('data-src');
    });
    
    
    

    This is a super basic tutorial but considering I've seen so many other solutions, I thought I'd share what I've implemented;  it works under every scenario I've tested, including History changes via AJAX (like my site does).

    这是一个超级基础的教程,但是考虑到我看过许多其他解决方案,我想分享一下我已经实现的内容。 它适用于我测试过的每种情况,包括通过AJAX进行的历史记录更改(就像我的网站一样)。

    Of course this doesn't take into account true scroll-based lazy load but that's generally done by a plugin in your favorite JavaScript framework or a standalone component. If you're looking for a simple solution, however, this is it!

    当然,这没有考虑真正的基于滚动的延迟加载,但是通常是通过您喜欢JavaScript框架中的插件或独立组件来完成的。 但是,如果您正在寻找一个简单的解决方案,就是这样!

    翻译自: https://davidwalsh.name/lazyload-image-fade

    安卓手机加载淡入淡出效果

    展开全文
  • 因为安卓手机有很多种尺寸,如果使用普通图片就会产生变形,9patch图片就能很好地解决这个问题。如果你还不会制作9patch图片,那你先去学会9patch图片的制作方法再来看这篇文章吧。 步骤二:放9patch图片 这一步既是...
  • 请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了? 有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的键值 是什么? 或者有什么其他方法? 判断窗口尺寸改变的 size 方法无效 !...
  • 页面自适应手机显示

    2014-10-24 15:56:38
    只需要一句话: 解析: 解释:content中的“width...了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 4
  • 手机端h5页面字体大小适配

    千次阅读 2019-06-24 19:15:00
    为解决适安卓手机跟苹果手机字体大小和高度不一致的问题; 首先设置初始字体:由于浏览器默认(因为1em=16px,所以0.625em=10px); 设置初始字体大小为62.5%;然后根据不同的屏幕尺寸计算相对应的百分比; 代码...
  • 黑马安卓52期视频教程

    热门讨论 2015-06-24 22:15:48
    01、安卓基础+JNI(14天)-------------------------- day01_Android应用开发-快速入门 01_网络制式的概念 02_android简单历史 03_Android体系结构 04_JVM和DVM的区别 05_下载SDK 06_SDK目录结构 07_模拟器的创建 ...
  • View是整个android可视化界面的窗口,我们可以通过这样一个界面,来简单地操作我们的手机,或是从手机上获得更多的信息,但它似乎不像电脑的桌面一样,可以同时打开很多的页面,几个程序可以同时显示在前端,方便我...
  • 移动端Web页面,即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更...
  • 安卓常用,比较有用的第三方框架

    千次阅读 2017-08-07 10:54:44
    每次任务调度前会选择优先级高的任务,比如 App 页面中 Banner 的优先级高于 Icon 时就很适用。   (3) 支持延迟到图片尺寸计算完成加载   (4) 支持飞行模式、并发线程数根据网络类型而变 手机
  • UI设计有时是一件非常耗时且枯燥的工作,但是,UI设计是Android开发必须要掌握、且要熟练掌握的一部分,也许...图标设计要遵循手机图标样式,不要简单用Web页面图标。 使用主题/样式, 尺寸和颜色资源来减少多余的值
  • 蓝湖使用环境,需要在 PSCC2015以上版本使用,...选择当前设计稿的设计尺寸,一般情况下移动端手机设计稿是iPhone 6尺寸设计稿750*1334选择 Ios @2x ; 当前页面的切图,找到需要切图的图层部分标记一下,会出现一...
  • 手机APP-UI设计规范

    2018-10-26 10:16:04
    手机APP-UI设计规范,IOS和安卓尺寸换算标准,字体大小,统一页面规范等
  • 4.6版(2015.3.26) 1、电话簿组件增加...9、滑动页面框组件增加“置现行页面”命令; 破解说明: 4月28号的更新包+破解补丁 请直接把破解补丁放到和安装文件同个目录 首次使用请先在本地绑机里随意注册码注册一次
  • |--屏幕相关之Display类获取屏幕尺寸和分辨率 |--屏幕适配之ScrollView |--屏幕适配之像素dp和px之间转换 |--工具类之Log的封装类 |--工具类之不同log打印的封装 |--工具类之开启新的Activity |--布局加载器的获取 |...
  • input获取焦点页面自动滚动

    千次阅读 2018-07-23 16:35:10
    *在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。 *然后定位到input框。 */ window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ ...
  • 移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1、安卓浏览器看背景图片,有些设备会模糊 用同等比例的...
  • 移动前端兼容操作总结

    千次阅读 2018-06-29 19:32:37
    移动端Web页面,即常说的H5页面、手机页面、webview页面等。手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好...
  • 移动端两种布局方式

    2020-10-06 07:56:13
    安卓手机尺寸:320px 360px 375px 384px 400px 414px 500px 720px – 苹果手机尺寸:640px 750px 通过less+rem+@media 技术完成页面在各个手机尺寸上的显示 手机页面的准备工作: –UI设计师会先给移动端页面设计...
  • --安卓手机尺寸:320px 360px 375px 384px 400px 414px 500px 720px --苹果手机尺寸:640px 750px 2:通过less+rem+@media技术完成页面在各个手机尺寸上的显示 3:手机页面的准备工作: --UI设计师会先给移动端页面...
  • --安卓手机尺寸:320px 360px 375px 384px 400px 414px 500px 720px --苹果手机尺寸:640px 750px 2:通过less+rem+@media 技术完成页面在各个手机尺寸上的显示 3:手机页面的准备工作: --UI设计师会先给移动端页面...
  • 页面样式页面样式页面尺寸在Axure 9中,由于有了负坐标(负空间)系的特性。同时也为移动端设计提供了常见的页面尺寸大小。主要分为we、IOS(苹果)手机设备、Android (安卓手机设备的常见尺寸。Axure 9提供了...
  • 页面样式页面样式页面尺寸在Axure 9中,由于有了负坐标(负空间)系的特性。同时也为移动端设计提供了常见的页面尺寸大小。主要分为we、IOS(苹果)手机设备、Android (安卓手机设备的常见尺寸。Axure 9提供了...
  • 四、移动适配

    2020-02-03 10:33:20
    移动端Web页面,即常说的H5页面、手机页面、webview页面; 手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同屏幕...

空空如也

空空如也

1 2 3 4
收藏数 69
精华内容 27
关键字:

安卓手机页面尺寸