移动端横向溢出隐藏解决方法

今天制作网站自适应中,遇到一个问题:如果使用定位居中法, 在电脑端设置溢出隐藏起作用, 而在移动端中,右边溢出却可以向右滑动。

具体代码如下:

body {
  overflow-x:hidden;
}
.box {
  position:absolute;
  left:50%;
  width:500px;
  height:200px;
  background:red;
  margin-left:-250px;
  text-align:center;
}

右边溢出部分在移动端设备中,可向右滑动。查找了相关资料,最后的解决方法如下:

html, body {
  overflow-x:hidden;
}

给html也加入溢出隐藏,而不是仅仅body,即可解决此问题。

总结: 在做移动端页面时,如果要禁止横向滑动,需要给html及body标签一同加入溢出隐藏代码,防止特殊情况可右滑动。

时间: 2024-09-29 22:32:23

移动端横向溢出隐藏解决方法的相关文章

[JavaEE]Get请求URI中带的中文参数在服务端乱码问题的解决方法

在Get请求中,如果请求参数中带有中文,如 http://localhost:8080/DinnerParty/shop/search?query=多伦多, 在服务端拿到的是乱码. 这是因为客户端提交过去的是UTF-8编码的数据,而服务端解析URi时可能使用的是 iso8859-1编码. 修改tomcat配置文件server.xml <Connector port="8080" protocol="HTTP/1.1"               connect

Android EditText输入字数限制总结(包括中文输入内存溢出的解决方法)

限定EditText输入个数的解决方案很多,但是一般主要考虑两点,也就是处理两件事: (1)不同语言字符(英文.中文等)处理方式 (2)输入字符达到数目后,是否仍然允许用户输入 第一点,涉及的东东其实蛮多,不同语言在不同编码中占据字节数等,不同语言在U8等编码的表示范围等,这一整块知识很丰富, 自己暂时没有理的特别顺,稍后整理再说吧. 第二点,目前主流app的处理方案也各有不同,qq5.0以前的版本,发表说说貌似是没有字数限制的(我试了一个350字左右的照样发), 5.0以后限制了,这样如果用户

Android EditText输入字数限制总结(包含中文输入内存溢出的解决方法)

转载请注明,大飞:http://blog.csdn.net/rflyee/article/details/38856539 限定EditText输入个数的解决方式非常多,可是一般主要考虑两点.也就是处理两件事: (1)不同语言字符(英文.中文等)处理方式 (2)输入字符达到数目后,是否仍然同意用户输入 第一点,涉及的东东事实上蛮多,不同语言在不同编码中占领字节数等,不同语言在U8等编码的表示范围等,这一整块知识非常丰富,自己临时没有理的特别顺.稍后整理再说吧. 第二点.眼下主流app的处理方案也

内存泄露、内存溢出以及解决方法

内存泄露是指程序在运行过程中动态申请的内存空间不再使用后没有及时释放,从而很可能导致应用程序内存无线增长.更广义的内存泄露包括未对系统的资源的及时释放,比如句柄等. 内存溢出即用户在对其数据缓冲区操作时,超过了其缓冲区的边界:尤其是对缓冲区写操作时,缓冲区的溢出很可能导致程序的异常. 一.内存泄露 "知己知彼,方能百战不殆",如果我们能够比较清楚的了解在编程的时候哪些情况容易导致内存泄露,通过避免这些糟糕的情况,从提高代码的质量本身出发,来抵御潜在导致内存泄露的发生. 1.1先来看看内

基于Java内存溢出的解决方法详解

一.内存溢出类型 1.java.lang.OutOfMemoryError: PermGen space JVM管理两种类型的内存,堆和非堆.堆是给开发人员用的上面说的就是,是在JVM启动时创建:非堆是留给JVM自己用的,用来存放类的信息的.它和堆不同,运行期内GC不会释放空间.如果web app用了大量的第三方jar或者应用有太多的class文件而恰好MaxPermSize设置较小,超出了也会导致这块内存的占用过多造成溢出,或者tomcat热部署时侯不会清理前面加载的环境,只会将context

Ecshop 后台导出订单Excel时, 内存溢出的解决方法

今天继续跟大家分享一下,在我配置Ecshop时的问题. 今天的问题是在后台想要导出订单列表Excel时出现的内存溢出.错误提示如下 问题:  Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate XXXXX) 原因: 出现此问题的原因是因为ECshop 项目中限定了 PHP 可以分配的内存大小.限制内存的作用是为了防止其他恶性插件滥用内存. 在我的项目中内存被限制在64MB,所以问题提示时出

Lodop条形码竖条和值右端不对齐的解决方法

当Lodop条形码设置的宽度比较短,数值比较多的时候,会出现条码的竖条和右端不对齐.个人测试了一下,发现解决办法有三种:1.增加条形码的宽度.2.隐藏条码本身的值,用text文本代替.3.修改条形码下方数值的大小.默认的数值文字大小是9,缩小后可以显示在条码下方,和右端对齐,就是文字会比较小,比较条码本身设置的比较小.测试代码: <head> <meta http-equiv="Content-Type" content="text/html; charse

关于移动端position:fixedbug的解决方法

原因:移动端手机激活软键盘,fixed定位会出现元素位置漂移 解决办法:头部底部使用fixed定位,中间正文部分使用absolute,并设置top值和bottom值为顶部底部的高度. 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <meta name="

php查询mysql返回大量数据结果集导致内存溢出的解决方法

web开发中如果遇到php查询mysql返回大量数据导致内存溢出.或者内存不够用的情况那就需要看下MySQL C API的关联,那么究竟是什么导致php查询mysql返回大量数据时内存不够用情况? 答案是: mysql_query 和 mysql_unbuffered_query 两个函数 首先来分析一个典型的实例:在执行下面的代码的时候就会导致php请求mysql返回结果太多(10W以上)导致PHP内存不够用. while ($row = mysql_fetch_assoc($result))