素材巴巴 > 程序开发 >

iOS移动前端开发总结

程序开发 2023-09-19 19:46:35

iOS移动前端也可以说是iPhone移动前端,做过才知道有一些坑,记录下来,以便下次不会遗忘,希望这篇文章能够帮到正在做iPhone手机移动前端的你。当然有一些内容也适用在Android上,如果你发现有错误的地方或者有更好的技巧,欢迎留言告知我。

一:输入框点击之后页面会放大

iPhone的一个坑,当你的页面有表单,需要填写内容时,聚焦后,发现页面会放大,这可能导致一些设计变形,例如超出内容出现横向滚动条。

解决方案:很简单,不让用户放大页面的操作,添加以下的meta即可。

user-scalable=no表示不允许用户点击屏幕放大浏览;

二:遮罩点击显示后不会全屏显示,需要滑动以下才会全屏

Android不会出现上面这种情况,ios因为元素刚开始不可见,点击显示后无法填充全屏,所以记得给遮罩的背景添加一个高度为window的高度,bug可以在Bootstrap的issue里面发现:https://github.com/angular-ui/bootstrap/issues/1812

var winHeight= $(window).height();  $(".modal-backdrop").css("height",winHeight);

三:不让用户放大图片和文字

maximum-scale=1阻止用户缩放,比例为1:1

四:重置按钮样式

iOS默认会给按钮加按钮button加一个iOS的样式,你需要在里面加上

button,input[type="button"]{-webkit-appearance:none;*overflow:visible;}

其他使用于iOS移动前端的技巧

一:JavaScript提示用户添加到主屏幕

http://caibaojian.com/add-to-home-screen.html

之前的一篇关于iPhone可以添加到主屏幕,从而通过手机桌面像打开APP一样打开网页,这对于比较依赖移动前端的网页比较适合,如果是打开一两次的话,添加这个提示不免就有点扰乱用户了,所以可以根据需要来添加。

二:設定 Web Applications

1.設定將網頁儲存為 home screen icon 的圖片路徑,預設值為 57×57

2.定義其他裝置 size 圖片


 
 

3.設定載入頁面時 loading 圖片

4.隱藏底部 iPhone button bar,看起來更像 iPhone App

5.更改 status bar 樣式

6.當網頁載入完成後,可以隱藏 URL bar,具体可以参考:在手机上隐藏地址工具栏

window.onload = function(){
 setTimeout(function(){
 window.scrollTo(0, 1);
 }, 100);
 }

如果旋轉裝置,則必須在加上 resize event

// jQuery resize event
 $(window).resize(function() {
 window.scrollTo(0, 1);
 });7.如果不想讓使用者滑動網頁,可以加入底下
document.addEventListener("touchmove", function(event){
 event.preventDefault();
 }, false);

链接推荐:

http://code.tutsplus.com/

https://developer.apple.com/library/

http://blog.wu-boy.com/

来拿起高大上的苹果扫描看看我做过的一个页面:

cx

转载于:https://www.cnblogs.com/cyweb/p/4120832.html


标签:

上一篇: Android中各类Dialog实例——交互 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。