移动端开发遇到的几个问题

1.iPhone下非a标签使用$.fn.on委托绑定没有作用。

  处理方案,给标签加上cursor属性

.event{
    cursor:pointer;
}

2.移动端使用iframe加载跨域网页出现“Refused to display in a frame becuase it set ‘X-Frame-Options‘ to ‘SAMEORIGIN”

  本人使用的跨域页面是移动官网"http://wap.10086.cn/",如果使用pc地址"http://www.10086.cn/"则不会发生此问题。

  原因:出于安全考虑,有的网站屏蔽了外部iframe的调用,比如上面的移动的移动端网页wap,而移动pc端则没有屏蔽。

  解决方案:

  在网上找解决方案,但是没有找到真正有用的。有几个方法被网友认为可行,但是我这里也没有用,详见http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin

  如果支持前端来说,这个应该是没有解决方案的,毕竟要访问的网页不是自己的。唯一的办法是让后台的同事帮忙使用默认浏览器打开这个网站。

3. webview中 sumsung手机使用margin-left:auto;margin-right:auto;来实现水平居中会导致该居中元素的宽度设置失效,宽度会自动填满居中区域。

  解决方案:定位+左距离50%+左偏移元素宽度的一半

.center{
position:relative;
left:50%;
margin-left:-100px;
}

4.webview中 sumsung定义高度不起作用

  解决方案:逼不得已使用padding撑起高度

5.webview中 sumsung margin-left不起作用

  解决方案:逼不得已使用padding-left

  推荐几篇博文:

  移动端开发需要注意的一些事

  移动前端的一些坑和解决方法(外观表现)

  

时间: 2024-11-12 12:38:02

移动端开发遇到的几个问题的相关文章

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程

WIFI物联网平台微信端开发分享

本文由企鹅圈原创成员Hunter_Zhu贡献. 本篇文章是基于近期一个项目微信端开发过程的一个总结.文中主要介绍了云智易平台下微信端开发的流程.该平台提供的主要功能以及此次H5开发使用到的一些UI组件.能够帮助企鹅仔高速对该平台微信开发有个了解. 本文介绍的微信硬件物联网开发思路不局限于某个平台.对市场上全部的平台,如机智云也是适用的,特此说明. 一.创建微信应用,配置微信server 在云智易开发平台中,开发人员须要在应用管理中创建一个微信应用,填写微信公众号的基本信息:APPID, APPS

一起学Google Daydream VR开发,快速入门开发基础教程一:Android端开发环境配置一

原文因涉及翻墙信息,被强制删除,此文为补发! 准备工作 进入Google Daydream开发者官网,开启准备工作,官网地址:https://vr.google.com/daydream/developers/ -------------------------------------------------------------------------------------------------------------------- Google Daydream开发者网址: https

移动端开发的知识系统介绍

移动端开发1. 移动端适配:http://suqing.iteye.com/blog/1982733http://www.douban.com/note/261319445/ http://www.woshipm.com/ucd/150207.html<meta name="screen-orientation" content="portrait"><!-- 强制竖屏 --><meta name="x5-orientatio

移动端开发用touch事件还是click事件

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

移动端开发适配总结

移动端开发适配2种方案总结 针对移动端适配的方案~ 一: 第一种方案是:所有的单位使用rem来适配:首先在页面上设置html的font-size的大小:如下我项目中的设置: html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400p

移动端开发备忘

这是一些移动端开发的备忘记录. <meta> 元素 <meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/> width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素) height:高度(数值 / device-height)(范围从223 到10,000) initial-s

如何进行SuperMap iServer服务端开发

有时候在进行地图应用开发时,可能单纯的客户端无法满足要求(如功能和性能等因素),这时就需要进行iServer的服务端开发.SuperMap iServer 6R/7c的服务端开发步骤如下: 一.在Eclipse中新建一个Dynamic Web Project 此过程截图略去 二.引用iServer所需的各类jar包 经测试后发现,必须引用iServer/WEB-INF/lib下的所有jar包,否则运行时会出现一些奇怪的错误.这些jar包所在的位置为[iServer安装目录]\webapps\is

优雅地进行移动端开发

对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)选取一款手机的屏幕宽高作为基准(比如 iphone6的375×667). 2)对于高清屏幕,为了达到高清效果,视觉稿的画布大小会是基准的2倍(对iphone6而言:原先的375×667,就会变成750×1334). 问题1:对于dpr=2的手机,为什么画布大小×2,就可以解决高清问题? 首先,我们要先了解一下 dpr 是什么? 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的

探究移动端开发

探究移动端开发 什么使移动端开发呢?这就是在手机等移动端设备上的网页开发.而当今比较流行的通过rem进行移动端的适配,所以这篇文章会主要介绍一些基本概念以及rem适配方案. 第一部分:基本概念 物理像素:这个就是在屏幕上可以控制的最小显示单位,比如显示颜色的最小单位. css像素: 就是我们在设计网页时在css中使用的像素,比如:border: 1px black solid;这里的1px即为css像素,实际上这种像素就是下面我们要介绍的设备独立像素. 设备独立像素(density-indepe