似乎没有在iOS上加载CSS定位
我正在创建一个响应式网站，但在我看来，CSS并没有在iOS上加载div的定位。
在iPhone 5s上没有JS的情况如何：
所以，我尝试的是通过javascript和jquery找到一种解决方法，尽管这似乎有效，但它仍然没有正常工作。如果我在这样的新js代码中声明严重的iOS设备，我的代码的长度将是巨大的：
/* Begin iPhone 5 portrait */
if (blockwidth == 67.375) {
$('input[type="date"]').css("width", "53px");
$('input[type="time"]').css("width", "53px");
$('input[type="date"]').css("height", "42px");
$('input[type="time"]').css("height", "42px");
$('input[type="text"]').css("height", "42px");
$('input[type="text"]').css("width", "93%");
$('input[type="button"]').css("height", "50px");
$('#nav_top').css("height", "170px");
$('#nav_logout').css("marginTop", "5px");
$('#nav_account').css("marginTop", "5px");
} else {}
/* Einde iPhone 5 portrait */
总CSS（也在JSFiddle中）：
@charset "utf-8";
/* CSS Document */
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
width : 5px;
opacity: 0.2;
}
::-webkit-scrollbar:hover {
width : 5px;
opacity: 0.6;
}
::-webkit-scrollbar-track {
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color : #288328;
}
::-moz-scrollbar {
width : 5px;
-moz-opacity:0.2;
}
::-moz-scrollbar:hover {
width : 5px;
-moz-opacity:0.6;
}
::-moz-scrollbar-track {
background-color : black;
}
::-moz-scrollbar-thumb {
background-color : #288328;
}
/* Kuler:
Olijfgroen: #95c11f
Donkergroen: #288328
Limoengroen: #e3f4ae
Oranje: #f39200
Wit: white
Zwart: black
Grijs: lightgrey
*/
/* OWN CODE CSS */
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
height: 100%;
width: 100%;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../img/page-loader.gif') 50% 50% no-repeat #95c11f;
background-size: 75px 75px;
}
/* BEGIN NAVIGATIE */
aside{
margin: 0px;
height:100%;
width: 25%;
background-color:#95c11f;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
-webkit-box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
}
#aside_logout{
margin-left:20px;
background-color:#288328;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#aside_account{
margin-left:10px;
background-color:#f39200;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#aside_bottom{
width:100%;
height:50px;
position:fixed;
bottom:-10px;
}
#aside_bottom a{
text-decoration:none;
color:white;
text-align:center;
}
.left{
float:left;
}
header{
display:none;
width:100%;
height:70px;
background-color:#95c11f;
-webkit-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
}
#menu_placement{
height:300px;
margin-left:20px;
margin-top:120px;
margin-right:20px;
}
nav{
display:none;
position: fixed;
top:60px;
left:0px;
width:100%;
height:auto;
z-index:500;
}
.men_button{
height:50px;
width:auto;
display:block;
text-align:left;
color: #288328;
font-weight:400;
margin:0 auto;
color:white;
float:left;
}
.men_button a{
text-decoration:none;
color:white;
}
.icon_menubutton{
width:40px;
margin-top:5px;
display:inline-block;
float:left;
}
.menu_content{
display:inline-block;
height:30px;
width:100px;
margin-left:10px;
line-height:50px;
float:left;
}
form{
height: 110px;
}
input{
display:block;
height:50px;
border:none;
border-radius:5px;
text-align:center;
}
input[type='text']{
width:100%;
margin-bottom:5px;
margin-top:10px;
background-image:url(../img/icon_search.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='date']{
display:inline-block;
float:left;
margin:0;
margin-bottom:5px;
background-image:url(../img/icon_date.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='time']{
display:inline-block;
float:left;
margin-left:5px;
margin-bottom:5px;
background-image:url(../img/icon_time.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='text'], input[type='date'], input[type='time'] {
background-color:#e3f4ae;
color:#95c11f;
-webkit-box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
-webkit-appearance: none;
}
input[type='button']{
display:inline-block;
float:right;
margin-left:5px;
margin-bottom:0px;
-webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
background-color: #288328;
color:white;
font-size:18px;
}
#aside_form{margin-top:20px;}
#nav_form{
margin-left:20px;
margin-top:10px;
margin-bottom:5px;
}
#small_logo{
width:100px;
height:auto;
margin-left:20px;
padding: 0;
border: 0;
float:left;
-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
-moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
}
header #small_logo{
width:60px;
position: fixed;
top:0px;
left:0px;
z-index:500;
height:auto;
margin-left:10px;
margin-right:10px;
padding: 0;
border: 0;
float:left;
-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
-moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
}
#menu_opener{
width:40px;
margin-top:15px;
margin-right:15px;
height:auto;
float:right;
}
#logo{
width:100%;
height:auto;
padding: 0;
border: 0;
}
header #logo{
width:auto;
height:40px;
margin-top:12.5px;
margin-left:85px;
padding: 0;
border: 0;
}
@media screen and (max-width: 360px), screen and (max-device-width: 360px) {
header #logo{
width:auto;
height:35px;
margin-top:15px;
padding: 0;
border: 0;
}
.menu_content{
height:50px;
width:auto;
margin-left:10px;
line-height:50px;
font-size:11px;
}
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin: 0px;
height:100%;
width: 75%;
background-color:black;
float:right;
z-index:500;
}
.block{
margin: 0px;
width:calc(100% / 3);
background-image: url(../img/bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
display:inline-block;
float:left;
font-weight:normal;
}
.blockfooter{
height:100px;
width:100%;
background-color:rgba(255, 255, 255, 0.75);
margin-bottom:25px;
}
.tagblock{
height:50px;
width:100%;
}
.tagline{
height:50px;
margin:0;
padding:0;
padding-left:15px;
float:left;
line-height:50px;
font-size:19px;
}
.amounttag{
height:50px;
width:50px;
background-color:#95c11f;
margin:0;
padding:0;
float:right;
color:white;
line-height:50px;
text-align:center;
font-size:30px;
}
.pricetag{
height:50px;
width:50px;
background-color:#288328;
margin:0;
padding:0;
float:right;
color:white;
line-height:50px;
text-align:center;
font-size:14px;
font-weight:bold;
}
.allergictag{
height:50px;
margin:0;
padding:0;
float:left;
}
.icontag{
width:170px;
height:30px;
padding:10px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.icons{
width:30px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.datetag{
height:25px;
width:100px;
background-color:#f39200;
margin:0;
padding:0;
float:right;
color:white;
line-height:35px;
text-align:center;
font-weight:normal;
font-size:14px;
}
.timetag{
height:25px;
width:100px;
background-color:#f39200;
margin:0;
padding:0;
float:right;
color:white;
line-height:15px;
text-align:center;
font-weight:bold;
}
/* EIND BLOCKSTYLE */
/* Kuler:
Olijfgroen: #95c11f
Donkergroen: #288328
Limoengroen: #e3f4ae
Oranje: #f39200
Wit: white
Zwart: black
Grijs: lightgrey
*/
@media screen and (max-width: 1220px), screen and (max-device-width: 1220px) {
/* BEGIN NAVIGATIE */
aside{
margin: 0px;
height:100%;
width: 25%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
header, nav{display:none;}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin: 0px;
height:100%;
width: 75%;
background-color:black;
float:right;
}
.block{
margin: 0px;
width:50%;
background-image: url(../img/bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
display:inline-block;
float:left;
font-weight:normal;
}
/* EIND BLOCKSTYLE */
}
@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
/* BEGIN NAVIGATIE */
aside{
display:none;
}
header{
margin: 0px;
width: 100%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:0;
}
#nav_top{
width:100%;
height:auto;
background-color:#95c11f;
-webkit-box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
}
#menu_nav_placement{
margin-left:20px;
height:50px;
margin-bottom:5px;
}
.men_button{
height:50px;
display:inline-block;
text-align:left;
font-weight:400;
text-align:center;
margin-bottom:5px;
float:inherit;
}
.icon_menubutton{
width:40px;
margin-top:5px;
float:left;
}
.menu_content{
height:50px;
width:auto;
margin-left:10px;
line-height:50px;
}
.left{
float:left;
}
.right{
float:right;
}
#nav_logout{
margin-left:20px;
background-color:#288328;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav_account{
margin-right:20px;
background-color:#f39200;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav_bottom{
width:100%;
height:50px;
margin-top:-5px;
}
#nav_bottom a{
text-decoration:none;
color:white;
text-align:center;
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
height:100%;
width: 100%;
float:right;
margin-top:70px;
}
.block{
margin: 0px;
height:200px;
width:50%;
background-color:rgba(255,0,4,1.00);
display:inline-block;
float:left;
}
/* EIND BLOCKSTYLE */
}
@media screen and (max-width: 600px), screen and (max-device-width: 600px) {
::-webkit-scrollbar {
width : 0px;
opacity: 0.2;
}
::-webkit-scrollbar:hover {
width : 0px;
opacity: 0.6;
}
::-webkit-scrollbar-track {
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color : #288328;
}
::-moz-scrollbar {
width : 0px;
-moz-opacity:0.2;
}
::-moz-scrollbar:hover {
width : 0px;
-moz-opacity:0.6;
}
::-moz-scrollbar-track {
background-color : black;
}
::-moz-scrollbar-thumb {
background-color : #288328;
}
/* BEGIN NAVIGATIE */
aside{
display:none;
}
header{
margin: 0px;
width: 100%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
input[type='date']{
background-position:center;
}
input[type='time']{
background-position:center;
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin-top:70px;
height:100%;
width: 100%;
float:right;
}
.block{
margin: 0px;
height:200px;
width:100%;
background-color:black;
display:inline-block;
float:left;
}
/* EIND BLOCKSTYLE */
}
以下是总代码示例： https://jsfiddle.net/LLgsqyfc/
正常的@media查询和@ media查询设备的宽高比也无效。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？