移动端布局注意事项学习之一

0、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

1、关闭iOS键盘首字母自动大写

<input type="text" autocapitalize="off" />

2、禁止文本缩放

html {
  -webkit-text-size-adjust: 100%;
}

3、移动端如何清除输入框内阴影

在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

input, textarea {

  border: 0;
  -webkit-appearance: none;
}

4、忽略页面的数字为电话,忽略email识别

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

6、移动端禁止选中内容

div {
  -webkit-user-select: none;
}

8、如何禁止保存或拷贝图像

通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

img {
  -webkit-touch-callout: none;
}

9、解决字体在移动端比例缩小后出现锯齿的问题:

-webkit-font-smoothing: antialiased;

10、栅格布局:

box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局

12、按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数

document.body.addEventListener(‘touchend‘, function () { });

13、解决去掉下边框:

-webkit-border-bottom:none;

14、英文文本换行(不拆分单词):

word-wrapbreak-word

15、字体大小尽量使用pt或者em,rem,代替px。

16、设置input里面placeholder字体的大小

::-webkit-input-placeholder{

  font-size:10pt;

}

17、wap页面有img标签,记得加上display:block;属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。

对于网站字体设置

移动端项目:

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

移动和pc端项目:

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

原文地址:https://www.cnblogs.com/feixiablog/p/9071568.html

时间: 2024-10-07 18:17:40

移动端布局注意事项学习之一的相关文章

移动端布局注意事项及解决

1.winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 1.关闭iOS键盘首字母自动大写 <input type="text" autocapitalize="off" /> 2.禁止文本缩放 html {-webkit-text-size-adjust: 100%;}

移动端布局注意事项与less

用Koala实现less的实时编译 1.下载Koala(Koala可以实现实时编译) 2.把CSS文件夹(如index.css,index.less)拖到Koala中 3.点击到需要编译的index.css,如: 4.点击Compile即可实现实时编译.Koala会在底部最小化运行. less的语法 1.less可以定义变量,便且可以实现计算 如:[若是UI给的图是750,则@r=750/script代码适配的时候随意除的数:@r也=根字体大小*2(这个根字体大小是指的设计图的尺寸/2的手机下看

PC端布局注意事项

1.vertical-align只对inline-block或table-cell有效: 2.一个定宽的没定高的div,高度会自动自适应,但是若是一个英文单词过长则会溢出div,此时需要使用word-wrap或者word-break(单词会被切断): 3.两端定宽,中间自适应: a.table-layout:fixed; b.flex; c.双飞翼布局. 原文地址:https://www.cnblogs.com/JIEJIANG/p/9769991.html

移动端布局学习之流式布局1

1.移动端基础 1.1 浏览器现状 国内的UC和QQ 百度等手机浏览器都是根据Webkit修改过来的内核,国内目前尚无自主研发的内核,就像国内的手机系统基本上都是局域安卓修改开发的一样. 意思就是:兼容移动端主流浏览器 处理Webkit内核浏览器即可. 1.2 手机屏幕的现状 移动端设备屏幕尺寸非常多,碎片化严重 Android设备有多种分辨率480*480 480*854 540*960 720*1280 等等 近年来iPhone的碎片化也严重了 其设备的主要分辨率有 640*960 640*

移动端开发注意事项记录

移动端开发注意事项记录 1.移动端WEB开发常见问题 2.webapp开发技巧 3.移动端开发需要注意的20个要点 4.移动平台3G手机网站前端开发布局技巧汇总

浅谈移动端布局问题

移动端推广速度快,效果好,越来越多的企业,商家开始重视移动站的建设和移动页面(h5)的制作.随着移动页面的玩法越来越多,对前端技术的要求也会越来越高.选择合适的布局,是写好移动页面的第一步.今天我们就来谈谈移动端的布局问题.为什么移动端布局如此混乱?这是由多方的原因造成的. css这套技术系统本身十分混乱,基本上可以说毫无规律可言,依赖于技术人员的熟练程度而不是逻辑更多一些:2.css历经了多个时代的升级,每一次升级之后,新的技术标准和旧的基本上没有任何关联.比如:table布局,div+css

《CSS网站布局实录》学习笔记(三)

第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di

《CSS网站布局实录》学习笔记(四)

第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一般采用横向导航. 纵向导航:纵向导航更倾向于表达产品的分类. 下拉导航:主要用于功能复杂的网站. 总的来说,导航的核心目标就是设计一个简单.快捷的操作入口,帮助用户快速地到达网站中的 内容.这里将使用CSS来对这3种常见的导航进行设计. 4.1.1 横向导航 假设目前有6个频道,如果用传统的表格式布

移动端布局解决方案+神器

godcss 移动端布局终极解决方案+神器--- 让移动端布局开发更加容易 http:/www.github.com/godcss/ 介绍 godcss不是一个库,也不是一个框架.它是一个移动端布局开发解决方案.使用godcss可以让移动端布局开发更容易. 使用动态的HTML根字体大小和动态的viewport scale. 遵循视觉一致性原则.在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的. 不仅便捷了你的布局,同时它使用起来异常简单.可能你会说 talk is cheap,s