全国服务热线:18980020603 成都热线:028-86633922
新闻中心网站专题联系我们
行业新闻 建站经验 网站建设资讯 手机网站资讯 微信网站建设资讯 APP开发资讯 商城网站资讯

成都设计网站建设:手机网站开发总结

发布人:桔子科技    发布时间:2015-10-19 08:36:04    分享到:
 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:


一、META/LINK相关
1、百度禁止转码
通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:
<br>
相关链接:SiteApp 转码声明
2、添加到主屏后的标题(iOS)
<br>
3、启用 WebApp 全屏模式(iOS)
当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果)
<br> <br>
PS:然而,经本人用5S测试,设置"apple-touch-fullscreen"并没有什么卵用,希望了解者能在底部评论告知
4、设置状态栏的背景颜色(iOS)
设置状态栏的背景颜色,只有在 "apple-mobile-web-app-capable" content="yes" 时生效
<br>
content 参数:
default :状态栏背景是白色。
black :状态栏背景是黑色。
black-translucent :状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
6、移动端手机号码识别(iOS)
在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
7位数字,形如:1234567
带括号及加号的数字,形如:(+86)123456789
双连接线的数字,形如:00-00-00111
11位数字,形如:13800138000
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别:
<br>
但某些时候,你关闭电话自动识别后,又希望某些电话号码长按时能够链接到 iPhone 的拨号功能和短信功能,你可以使用下面的方法实现:
开启电话功能:
123456
开启短信功能:
123456
7、移动端邮箱识别(Android)
与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:

<br>
同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a mailto:dooyoe@gmail.com">
8、添加智能 App 广告条 Smart App Banner(iOS 6+、Safari)
<br>
9、iOS Web app启动动画
由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小,相应地在retina设备上要减去40px的大小
<br>
(landscape:横屏 | portrait:竖屏)
10、添加到主屏后的APP图标
指定Web App添加到主屏后的图标路径,有两种略微不同的方式:

apple-touch-icon:在IOS6及以下的版本会自动为图标添加一层高光效果(IOS7开始已使用扁平化的设计风格)
apple-touch-icon-precomposed:使用“设计原图图标”
效果:

图标尺寸:
可通过指定size属性来为不同的设备提供不同的图标(但通常来说,我们只需提供一个114 x 114 pixels大小的图标即可 )
官方说明如下:
Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
11、优先使用最新版本 IE 和 Chrome
<br>
二、HTML/CSS
1、关闭iOS键盘首字母自动大写
在iOS中,默认情况下键盘是开启首字母大写的功能的,如果启用这个功能,可以这样:
<br>
2、关闭iOS输入自动修正
和英文输入默认自动首字母大写那样,IOS还做了一个功能,默认输入法会开启自动修正输入内容,这样的话,用户经常要操作两次。如果不希望开启此功能,我们可以通过input标签属性来关闭掉:
<br>
3、禁止文本缩放
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html {
-webkit-text-size-adjust: 100%;
}
需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport'。
4、移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
5、快速回弹滚动
我们先来看看回弹滚动在手机浏览器发展的历史:
早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iScroll;
Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:
http://www.idangero.us/sliders/swiper/index.php
6、移动端禁止选中内容
如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all (移动端不需要) */
-ms-user-select: none; /* IE 10+ */
}
7、移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。
8、如何禁止保存或拷贝图像(iOS)
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
img { -webkit-touch-callout: none; } 。
本文来源于成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司!
成都网站建设,成都网站设计,成都网站制作,成都网页设计,成都网站建设公司 ,成都网站设计公司, 成都网站制作公司,成都网页设计公司,成都手机网站建设,手机网站建设,成都APP开发,APP开发,成都建网站,成都做网站,成都商城网站建设,集团网站建设,网站建设,高端网站建设,品牌网站建设,成都平台网站建设,成都响应式网站建设,成都微信网站建设,成都微商城网站建设,成都微信营销,成都网站优化,成都网络公司。


下一篇:手机网站建设:微信网站和手机网站的区别在哪儿?上一篇:手机网站建设:浅谈移动端微网站建设

最新案例
手机/微网站
  1. [成都]微信网站建设:微信分销系统能为商铺带来哪些特色服务
  2. [成都]微信网站建设:如何通过微信公众号来推广产品
  3. [成都]微信网站建设:微信开发都有些什么功能
  4. [成都]手机网站:手机网站设计需要达到什么效果
  5. [成都]手机网站:手机网站响应式网站解决方案
  6. [成都]手机网站:手机网站响应式网站解决方案
网络营销
  1. APP开发: APP网页评分功能设计
  2. APP开发:手机APP开发前这4点必须要了解
  3. APP开发:为什么企业要做手机APP
  4. APP开发:你可以更好的留住APP用户
  5. APP开发:开发时间的长短主要由哪些因素决定
  6. APP开发:电子商务类APP开发的4点建议
img

7x24小时售后服务

img

5倍故障时长赔付

img

15天无理由退款

img

N对一管家服务

让我们的顾问联系您

  • 电话:4006-028-024 028-86633922

    邮箱:Service@orangeapp.cn

    成都市成华区崔家店路789号上城国际1-24-9号

qq sina