iOS7 html5页面在ipad上显示过宽的解决方案

最新推荐文章于 2021-08-06 09:55:02 发布
最新推荐文章于 2021-08-06 09:55:02 发布
阅读量437 收藏
点赞数
分类专栏： Html5 & Hybrid iOS 文章标签： html5 ios7

原始Meta定义：

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>

在iOS7上改为:

<metaname="viewport"content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>

就是把width参数去掉即可

Thierryxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决
08-26
主要介绍了iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
12-10
Vue应用(vue-router)上使用history模式，在某个页面内调用微信JSSDK相关API，如扫码、分享等，使用当前页面URL总会出现签名错误(invalid signature)，导致API调用失败。 问题根源 Vue-Router进行路由切换的时候，...
[IOS_HTML5]IOS7下HTML5的各种坑
weixin_30516243的博客
06-13 203
这些天 Apple 已经推出了 iOS 7 以及 iPhone 5S 和 iPhone 5C 。Apple 面向 web 开发者仅仅发布了 10% 的所需信息，我可以说这是自 1.0 以来，bug 最多的 Safari 版本嘛。文本我将介绍新的 API 和特性，以及如果你有网站或 webapp ，马上需要处理的大多数问题。 简而言之 没有时间读这篇长文？ UI 变化：工具栏色彩，新的全...
ipad html 阅读器,如何在iPad上全屏显示网页内容或者HTML5演示文稿?
weixin_35779506的博客
05-30 688
You can set up a webpage or HTML5presentation to run in the full screen on iPad so that it looksmore native. Fullscreen viewing provides more space for yourwebpage, while hiding all Safari elements bu...
ipadpro尺寸的html,iPad Pro屏幕尺寸是多少？iPad Pro分辨率是多少？
weixin_34837971的博客
06-17 398
iPad Pro屏幕尺寸是多少iPad Pro屏幕尺寸是12.9英寸。针对iPad Pro的屏幕尺寸是多少的问题，屏幕方面，iPad Pro采用12.9寸屏幕，可显示全尺寸虚拟键盘。设备宽度与iPad Air的高度相同，屏幕可同时显示两个全尺寸iPad app。除此之外，iPad Pro屏幕像素数量高达560万像素，高于Retina MacBook Pro。配置方面，iPad Pro配备了比iPh...
html5的网页在MAC及ipad上按钮无法正常切换的处理
Summersblue的博客
02-20 727
在昆山项目中，我遇到个情况，就是在其他浏览器里正常下一步上一步保存，在MAC本和IPAD上会直接跳至elec_check.jsp页,无法正常到下一页，或返回上一页， 原来的代码如下： 我把button全换成了 就好了，特此提醒一下    保存    下一步
ios中html怎么横屏,苹果xsmax页面怎么横屏
weixin_42362885的博客
06-10 379
在你想支持横竖屏的viewController里面重写两个方法：// 支持设备自动旋转- (BOOL)shouldAutorotate{ return YES;}// 支持横竖屏显示- (NSUInteger)supportedInterfaceOrientations{ return UIInterfaceOrientationMaskAll;}这样在这个viewController中就可以横竖...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
01-05
解决办法： 滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。 实例： $(#id).css('-webkit-overflow-scrolling','auto'); $(#id).scrollTop(9999); $(#id).css('-...
ios wkwebview离线化加载h5资源解决方案
01-04
确保[低速网络]或[无网络]可网页秒开。 2.使用[NSURLProtocol]拦截 区别于uiwebview wkwebview使用如下方法拦截 @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { ...
ios单独的页面支持横竖屏的状态调整，HTML5加载下（更新2）
abaodc2308的博客
03-20 100
单独的页面支持横竖屏的状态调整，HTML5加载下 工程中设置只支持竖屏状态，在加载HTML5的界面可以是横竖屏的，在不对工程其他界面／设置做调整的同时，可以这样去 #import "ViewController.h" #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width) #define SCREE...
移动端(ipad)h5页面体验解决方案
Lamour99的博客
08-06 1092
移动端(ipad)h5页面体验解决方案 一.输入内容后，点击软键盘回车键不会自动收起键盘 回车自动收起 if (navigator.userAgent.match(/(iPhone|iPad|Android|ios|SymbianOS)/i)) { window.addEventListener('keyup', (event) => { event.keyCode === 13 && (document.activeElement as any).blur() // ts
基于HTML5的iPad电子杂志横竖屏自适应方案
weixin_34302561的博客
01-08 658
基于HTML5的iPad电子杂志横竖屏自适应方案 (转载自：http://www.yeeach.com/?p=1172)   基于HTML5来制作iPad电子杂志，横屏及竖屏自适应是个大问题，查找了半天资料，没有一篇像样的文章可供参考。将思路及例子分享一下。例子并不严谨和规范，仅供参考。 大致思路： 1、对横屏（portrait）和竖屏（landscape）情况下的页面定义两个不同的HTM...
ipad尺寸html,HTML5之viewport标签，用于iPhone、iPad等手机网页开发。
weixin_32244597的博客
06-17 510
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />属性意义：width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为...
用HTML5实现iPad应用无限平滑滚动
tempsitegoogle
05-04 163
前言： LinkedIn 5月2日发布了新的iPad版本，它基于HTML5制作，在体验和界面上非常出色，在使用中可以发现它和原生应用基本没有任何差别。 关于这个版本，有两篇文章非常有价值，深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。 第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容： LinkedIn and...
iPad浏览器HTML5性能测试
weixin_34051201的博客
08-06 323
iPad浏览器HTML5性能测试360浏览器HD 385海豚浏览器HD 386UC浏览器HD 361Chrome 386QQ浏览器HD 386傲游云浏览器 367Opera Mini 62百度浏览器HD 3868684浏览器 386Safari 386     无论是PC浏览器还是移动平台上的浏览器产品，几乎都脱离不了其中一个测试参考项，那就是HTML5的性能测试。   对于苹果iOS系统来说，与...
[转]移动前端自适应解决方案和比较
weixin_34007906的博客
04-02 2959
移动前端自适应解决方案和比较 昨天晚上仔细看了这篇文章，写的很好，转载下来，常记于心. 以下文章摘自:前端开发博客 (http://caibaojian.com/mobile-responsive-example.html) 以下为正文: 互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用f...
解决ipad uiwebview显示网页超过屏幕宽度
co_diy的专栏
09-11 6370
从来没有开发过网页，工作需要写了个用户消息管理列表，这个网页在浏览器上可以全屏显示， 但是在ipad上显示超过全屏了，今天花了好长时间把它解决，做个记录。          解决方法：                   在头标签里添加一句                      最重要的是把user-scalable=0 其他几个属性参考 http://blog.csdn.net/
HTML5中判断横屏竖屏 和 长按事件
u014033756的专栏
06-14 1085
HTML5中判断横屏竖屏http://www.w3cways.com/1772.html 长按事件http://my.oschina.net/luoyezhiqiu/blog/493301
h5中的select下拉框在ios中样式兼容问题解决方案。 实例
最新发布
05-30
好的，针对您的问题，以下是一个解决方案的实例，供参考： 1. 首先，在html中定义一个select标签，并给它一个类名，例如“select-style”： ```html <select class="select-style"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> ``` 2. 然后，在CSS中定义该类名的样式，包括一些兼容性的处理： ```css .select-style { -webkit-appearance: none; /* 去掉ios默认样式 */ -moz-appearance: none; /* 去掉firefox默认样式 */ appearance: none; /* 去掉其他浏览器默认样式 */ background-image: url('path/to/arrow-icon'); /* 添加自定义的下拉箭头图标 */ background-size: 12px; /* 设置图标大小 */ background-repeat: no-repeat; /* 不重复显示图标 */ background-position: 95% center; /* 将图标放置在下拉框的右侧中间位置 */ padding: 8px; /* 设置内边距 */ border: 1px solid #ccc; /* 设置边框 */ } ``` 3. 最后，使用JavaScript监听下拉框的变化，并动态修改其选中项的样式： ```javascript var select = document.querySelector('.select-style'); select.addEventListener('change', function() { var selectedOption = this.options[this.selectedIndex]; selectedOption.style.backgroundColor = '#ccc'; selectedOption.style.color = '#fff'; }); ``` 以上就是一个简单的解决方案，它可以使下拉框在ios中显示正常，同时也可以在其他浏览器中兼容。需要注意的是，不同的页面可能需要根据自己的实际情况进行一些微调，例如调整箭头图标的位置和大小等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值