html js 屏幕宽度,javascript – 更改视口宽度后如何适应屏幕?-程序员宅基地

技术标签: html js 屏幕宽度  

我需要一个页面的视口宽度为950px的横向和630像素的纵向。不幸的是这些像素宽度是不灵活的。

我使用CSS媒体查询根据方向调整DOM内容的宽度。

我正在收听JS中的方向改变事件,以便调整方向改变的视口大小。

一切在初始页面加载(纵向或横向)都看起来不错。

但是,在方向更改后,Mobile Safari会保留以前的缩放设置,而不是将视口装入屏幕。双击或两个直线。但我需要这样才能自动。

我已经附上源码,并将其上传到演示URL。

以下是方向更改后的截图:从横向到纵向,从纵向到横向。

如何强制Safari自动将视口宽度设置为屏幕宽度?还是我这样做都错了?

更改视口中的各种比例设置没有帮助。设置最大刻度= 1.0或初始刻度= 1.0似乎会覆盖我的宽度,将宽度设置为设备宽度(即iPad 2上的1024或768),留下死边距。设置minimum-scale = 1.0似乎什么都不做。

iPad orientation

/**

* update viewport width on orientation change

*/

function adapt_to_orientation() {

// determine new screen_width

var screen_width;

if (window.orientation == 0 || window.orientation == 180) {

// portrait

screen_width = 630;

} else if (window.orientation == 90 || window.orientation == -90) {

// landscape

screen_width = 950;

}

// resize meta viewport

$('meta[name=viewport]').attr('content', 'width='+screen_width);

}

$(document).ready(function() {

// bind to handler

$('body').bind('orientationchange', adapt_to_orientation);

// call now

adapt_to_orientation();

});

body {

margin: 0;

}

#block {

background-color: #333;

color: #fff;

font-size: 128px;

/* landscape */

width: 950px;

}

#block .right {

float: right

}

@media only screen and (orientation:portrait) {

#block {

width: 630px;

}

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_31308305/article/details/118021030

智能推荐

javascript正则截取,替换字符串_js字符串截取src中内容替换-程序员宅基地

文章浏览阅读1.7k次。温馨提示:(开发过程没有发现坑,打包竟然报错了,无语.jpg)此篇文章末尾提到的例子当中使用的(?<=exp),零宽度正回顾后发断言,在vue-cli项目当中,运行不会报错,但进入编译打包会报错如下:Invalid regular expression: /(?<=src=").*?(?=(">))/: Invalid group ,请自行使用?=替换或者根据个人需求进行适度..._js字符串截取src中内容替换

机器学习&数据挖掘:特征选择之 wrapper approach-程序员宅基地

文章浏览阅读1.5w次,点赞4次,收藏24次。在前面简要介绍了特征选择的Filter方法,由于Filter方法还有很多,在此不能一一介绍。Filter方法从原始特征中选择特征子集,用于后续的机器学习算法。由于Filter在特征选择时,没有考虑到所用的机器学习算法模型,可能会导致选择出的特征子集不适合后续的学习算法从而影响性能(这里指准确率)。因此,wrapper方法结合后续的机器学习算法,选择出能使最终的算法达到较高性能的特征子集。wrappe_wrapper approach

Eclipse闪退/打不开/无法启动/一闪而过打解决方法_elatisesearch启动闪退-程序员宅基地

文章浏览阅读555次。解决方式:通过在命令行中输入“where java”,找到除jdk目录下的所有java相关程序,直接删掉(一般会在C:\WINDOWS\system32下)内存不足,打开Eclipse目录下的eclipse.ini,把里面的-Xmx512m改成-Xmx256m检查环境变量,path变量中将jdk路径放在最前边(开头的“.;”直接后边)检查环境变量,path变量中将jdk中的jre路径放在最前_elatisesearch启动闪退

C语言学习入门--hello word(一)_c语言在代码旁标记用哪个双斜杠-程序员宅基地

文章浏览阅读3.9k次,点赞2次,收藏2次。在第一次接触一个新程序的时候第一个程序肯定是“hello word“,我曾经在一篇文章中看到这样的解释,“hello word”就如同一个新生婴儿的第一声啼叫,是新世界的开始。作为本系列C语言入门教程的开篇,我们先来认识一下C语言的“hello word”。 //hello.c #include //(1) void main()_c语言在代码旁标记用哪个双斜杠

MT7688 openwrt 编译 log 1_make[3]: leaving directory 'opkg-程序员宅基地

文章浏览阅读372次。make[1]: Entering directory '/home/openwrt_widora'make[2]: Entering directory '/home/openwrt_widora'make[2]: Entering directory '/home/openwrt_widora'rm -rf /home/openwrt_widora/staging_dir/target-mip..._make[3]: leaving directory 'opkg

Java学习杂谈(七)接口&组件、容器_组件和接口的区别-程序员宅基地

文章浏览阅读1.1k次。Java学习杂谈(七)接口&组件、容器Under Java经验汇总 | 三月 6th, 2010No commentJava杂谈(七)--接口& 组件、容器 终于又静下来继续写这个主题的续篇,前六篇主要讲了一些J2se方面的经验和感受, 眼下Java应用范围已经被J2ee占据了相当大的一块领域,有些人甚至声称Java被J2ee所_组件和接口的区别

随便推点

vue v-model修饰符_vue-model修饰符-程序员宅基地

文章浏览阅读74次。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &.._vue-model修饰符

主题七 最终的胜利----41.C语言程序员简历编写及面试技巧_c语言程序项目简历怎么学-程序员宅基地

文章浏览阅读582次。面试的一般流程:首先要简历做的好,才能通过简历海选进入第一轮笔试;其次要基础知识扎实,才能过笔试进入第二轮面试环节;最后,面试时自信大方,谈吐得当,get the offer!简历编写简历获取面试资格(符合公司招聘要求,最重要亮点,公司关心你的最强的部分,求职意向明确便于HR分类;HR最关心:工作经历,教育背景(HR可能不懂技术,置顶;技术名词英文化专业化);不同面试环节人_c语言程序项目简历怎么学

[翻译]Swift编程语言——初始化_编程语初始化的过程是什么-程序员宅基地

文章浏览阅读594次。初始化_编程语初始化的过程是什么

安卓渗透测试工具---drozer使用_drozer agent-程序员宅基地

文章浏览阅读1.6k次。目录drozer下载drozer安装drozer使用建立手机端和PC端的连接确定攻击面测试activities exported (容易绕过登陆验证)测试 content provider(易造成数据库泄露,sql注入等问题)利用暴露的content provider进行sql注入从File System-backed Content Providers获取信息测试services exported (权限提升)测试broadcast receivers exported(拒绝服务)drozer下载下载_drozer agent

各种技术资料汇总-Linux_linux技术资料-程序员宅基地

文章浏览阅读267次。Linux 下 SSH 命令实例指南提示-bash: make: command not found的解决办法持续完善中……_linux技术资料

自然语言处理领域以及多模态计算机视觉论文整理(持续更新)-程序员宅基地

文章浏览阅读336次,点赞8次,收藏8次。Transformer模型完全采用self-attention机制代替了传统使用的RNN模型结构,且在自然语言翻译方面取得了良好的效果,同时,transformer可以进行并行计算,而不是和RNN那样序列化计算,提高了计算效率,Transformer能够学习长距离元素之间的依赖,也解决了传统RNN模型的在序列很长时产生的梯度消失、梯度爆炸等问题。而且self-attention机制也可以对模型更好的进行解释。但transformer也有一些缺点,即计算量相对巨大,多头机制中的无效信息有很多。

推荐文章

热门文章

相关标签