Responsive design 永久摆脱横轴
我正在制作一个响应性网站sandbox.mercomcorp.com，我想停止我使用html的水平滚动，body{ 宽度：100%； 溢出x：隐藏； }在我的css中，所做的只是去掉可见的滚动条。我想永远停止水平，因为这就是我的css中应该附加的响应性站点的方式Responsive design 永久摆脱横轴,responsive-design,horizontalscrollview,Responsive Design,Horizontalscrollview,我正在制作一个响应性网站sandbox.mercomcorp.com，我想停止我使用html的水平滚动，body{ 宽度：100%； 溢出x：隐藏； }在我的css中，所做的只是去掉可见的滚动条。我想永远停止水平，因为这就是我的css中应该附加的响应性站点的方式 #phone {font-size:18px; } p.serviceheader {font-size:18px; color:#464646;} #servicetext {margin-top:-227px; margin-l
#phone {font-size:18px; }
p.serviceheader {font-size:18px; color:#464646;}
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;}
#servicelink {margin-top:-4px; margin-left:15px}
#securitylink {margin-top:20px; margin-left:2px}
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px}
#itlink {margin-top:-20px; margin-left:8px}
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;}
#personnellink {margin-top:6px; margin-left:15px}
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;}
#abouthome {margin-left:20px; float:left;}
#contacthome {font-size:23px; color:#464646; font-weight:bold;}
#prefooter {color:#464646; font-size:23px;}
#careershome {color:#464646; font-size:18px; margin-top:-5px;}
#jointeam {color:#464646; font-size:23px; margin-top:35px;}
#benefits {color:#464646; font-size:23px; margin-top:7px;}
#joinus {color:#464646; font-size:23px; margin-top:38px; }
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;}
p.corporateoffice {font-size:20px; color:#464646;}
p.officetext {color:#464646;}
#footer-links {font-size:12px;}
#chamberlogo {margin-top:10px; margin-left:28px;}
#sbalogo {margin-left:3px;margin-top:30px;}
#bicsilogo {margin-left:53px;}
#alliance {margin-left:15px;}
#mbchamber {margin-left:3px;}
#pmilogo {margin-left:55px;}
.prefooterlink a {color:#464646;}
#afcealogo {margin-bottom:-9px; margin-left:30px;}
#bbb {margin-left:17px;}
#infocommlogo {margin-left:40px;}
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;}
h1.pheader {font-size:26px;}
.customheader {margin-top:-60px;}
.bodycontentalign {margin-left:11px;}
.navalign {margin-top:-15px; margin-left:11px;}
.topphone {margin-top:-25px;margin-left:105px;}
.socialicons {margin-top:-32px; margin-left:60px;}
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC;
color: #5a5858;
float: left;
min-height:260px;
width: 260px;
}
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC;
color: #5A5858;
float: left;
min-height:260px;
width: 680px;
margin-left:-95px;
}
.innerpagenav {background-color:#ececec;}
#block-69 {margin-top:-15px;}
#block-72 {margin-top:-74px; margin-left:-1px;}
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;}
#block-372 {margin-top:-55px;}
#block-370 {margin-top:-45px;}
#block-25 {margin-top:25px;}
#datacentertext {margin-top:-245px; margin-left:10px; color:white;}
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;}
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;}
/*regular site css*/
html, body {
width: 100%;
overflow-x: hidden;
}
.container
{
background-color:white;
display:inline-block;
height:100%;
width: 100%;
/*border: solid 1px #aaa;*/
text-align: left;
font-size: 1em;
/*letter-spacing:px; */
/*white-space: nowrap; */
/*line-height: 12px; */
}
.square
{
width:19.5%;
margin:auto;
/* border: solid 1px #ccc; */
display: inline-block;
vertical-align:middle;
}
.words
{
background-color:#990913; color:white;
text-align:left;
width:12.8em;height:15em;
line-height:30px;
text-align:center;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
#block-66
{
/*background-color:purple;*/
position:relative;
top:-1px;
margin-left:105px;
}
#block-67
{
padding-top:5%;
}
#block-52
{
padding-top:15px;
}
a.linktext
{
color:#464646 !important; font-size:20px;
}
a.linktext1
{
color:#464646 !important; font-size:20px;
}
a.linktext2
{
color:#464646 !important; font-size:20px;
}
.centerlink
{
text-align: center!important;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.corporateoffice
{
color:#464646;
font-size:20px;
}
.officetext
{
color:#464646;
}
@media screen and (device-width:800px)
{
.words
{
/*color:orange;*/
}
/* .hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}*/
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
@media screen and (min-width: 768px)and (orientation:portrait)/*ipad*/
{
.container
{
height:100%;
width:100%;
text-align:center;
background-color:white;
display:inline-block;
}
.square
{
margin:auto;
width:15em!important;
text-align:center;
display:inline-block;
}
.words
{
width:100%;
}
a.linktext
{
color:#464646 !important; font-size:17px;
}
a.linktext1
{
color:#464646 !important; font-size:17px;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
#block-65
{
margin:-65 0 0 0 ;
position:absolute;
left:75px;
}
#block-66
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
.officetext
{
font-size:12px;
}
.corporateoffice
{
font-size:14px;
}
.data
{
width:100%!important;
}
#block-249
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-301
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-126
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-31
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-10
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
#block-358
{
position:absolute;
top:360px!important;
left:400px!important;
font-weight:bold!important;
font-size:23px;
line-height:1px;
}
.hwr-form-title
{
line-height:25px;
}
}
/*@media screen and (min-width: 768px)and (orientation:landscape)
{
.hide
{
width:68%;
height: 185px;
margin: auto !important;
}
}*/
@media screen and (min-width:1025px) /*and (orientation:landscape)*/
{
.hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
/*@media screen and and (min-width:) (max-width:1024px) and (orientation:landscape)
{
.topphone
{
font-weight:bold;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}*/
@media screen and (min-width:712px) and (max-width:1024px) and (orientation:landscape)/*between*/
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:12em;
text-align:left;
}
.words
{
width:100%;
height:210px;
/*color:red;*/
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
@media screen and (max-width: 680px) and (orientation:landscape)/*landscape small phone*/
{
#wrapper-4,#wrapper-5,#wrapper-9,#wrapper-10,#wrapper-11,#wrapper-12,#wrapper-13,#wrapper-14,#wrapper-15,#wrapper-16,#wrapper-17/*stops from scrolling horizontal*/
{
width:auto;
overflow: hidden;
padding :0.5em;
}
.hide /*logo*/
{
width:68%;
height: 185px;
/*display: block;*/
margin: auto !important;
}
.footerlogos
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:20em;
text-align:left;
}
.words
{
width:100%;
font-size:16px;
height:180px;
text-align:center;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
/*#block-66
{
width:100%
display:inline;
font-weight:bold;
position:absolute;
left:-25px;
top:25px;
letter-spacing:2px;
white-space:nowrap;
font:OpenSans-Semibold;
}*/
/*.phonenav
{
font-size:20px!important;
line-height:200%;
}*/
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
width:300px;
float:right;
}
/*.officetext
{
position:absolute;
top:500%;
width:100%;
font-size:20px;
white-space:nowrap;
color:red;
}*/
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
/*#block-38
{
margin:0;
position:absolute;
top:1625px;
width:100%;
color:red!important;
}*/
.corporateoffice
{
font-color:black!important;
font-size:17px!important;
font:semi-bold;
white-space:nowrap !important;
}
.officetext
{
font-size:16px!important;
}
/* .fb
{
position:absolute;
left:2px;
text-align:right;
background:white;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}*/
/*.fb-hide
{
position:absolute;
left:2px;
text-align:right;
background:white;
}*/
.socialicons
{
display:inline-block;
/* background-color:grey!important;*/
position:relative;
left:350px;
top:-15px!important;
z-index:2;
}
/*.fb
{
background:white;
}
*/
a.linktext
{
color:#464646 !important; font-size:20px;
}
a.linktext1
{
color:#464646 !important; font-size:20px;
}
.block-type-hwr-contact #hwr-contact-27 .hwr-form-title
{
line-height:90%;
}
/*.topfooter
{
margin:0;
position:absolute;
top:80px!important;
background:transparent
}
.botfooter
{
margin:0;
float:right;
position:absolute;
top:1px;
right:-330px;
background:transparent;
}*/
/*.contact {
position:absolute;
top:700px!important;
color:green;
margin-top:100px!important;
}*/
.contact
{
background:blue!important;
display:inline!important;
/*position:absolute!important;*/
top:19px!important;
}
#block-358
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:red!important;*/
}
#block-66
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:blue!important;*/
}
#block-249
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:orange!important;*/
}
#block-301
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/* background:pink!important;*/
}
#block-126
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:purple!important;*/
}
#block-31
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/* background:green!important;*/
}
#block-10
{
position:absolute;
top:230px!important;
left:5px!important;
font-weight:bold!important;
/*background:grey!important;*/
}
.customheader
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
/* @media screen and (min-width:601px) and (max-width:679px)
{
.container
{
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:15em;
text-align:left;
}
.words
{ width:100%;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.topphone
{
font-weight:bold;
}
}*/
@media screen and (device-width:600px)/*tablet 7 inch*/
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:12.85em;
text-align:left;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
.socialicons
{
position:absolute!important;
top:260px!important;
left:395px!important;
/*background:red!important;*/
}
}
/*@media only screen and (device-height:568px) and (device-width:320px) and (-webkit-min-device pixel-ratio:2) and (orientation :landscape) *//*iphone 5*/
@media screen and (device-aspect-ratio: 40/71)
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:18em;
text-align:left;
}
#block-66
{
/*left:65px!important;*/
font-size:10px!important;
/*background:blue!important;*/
}
.words
{
height:205px;
font-size:18px;
}
.officetext
{
font-size:10px!important;
}
.corporateoffice
{
font-size:12px!important;
}
/* .botfooter
{
float:right;
position:absolute;
top:2px;
right:20px;
}*/
}
@media only screen and (max-width:500px) and (orientation:landscape)/*iphone4*/
{
.container
{
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:15em!important;
text-align:left;
}
.words
{
width:100%;
height:203px!important;
text-align:center;
font-size:16px!important;
}
/*.botfooter
{
float:right;
position:absolute;
top:15px;
right:8px!important;
}*/
.officetext
{
font-size:12px!important;
}
.coporateoffice
{
font-size:14px!important;
}
.contact1{
position:absolute;
top:2050px!important;
margin-top:0px;
/*margin-top:100px!important;*/
}
#block-66
{
/* position:absolute;*/
left:-215px!important;
top:254px!important;
}
.socialicons
{
position:absolute;
left:300px!important;
top:215px!important;
}
#block-358
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-249
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-301
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-126
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-31
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
#block-10
{
position:absolute;
top:245px!important;
left:-210px!important;
font-weight:bold!important;
}
.contact
{
display:inline!important;
/*position:absolute!important;*/
top:19px!important;
}
}
@media screen and (min-width:481px) and (orientation:portrait)
{
container
{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:18em;
text-align:left;
display:inline-block;
background-color:white;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.words
{
width:100%;
}
}
@media screen and (min-width: 320px) and (max-width: 480px)/*small devices*/
{
.hide/*logo*/
{
margin-top:10%;
margin-bottom:2px;
display:block;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.container
{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:100%;
text-align:left;
display:inline-block;
background-color:white;
}
.words
{
color:white;
font-size:18px;
text-align:center;
background-color:#990913;
width:100%;
height:150px;
}
.title
{
width:100%;
}
#block-73 li.widget
{
margin-top:30%;
}
#block-66
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-358
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-249
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-301
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-126
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-31
{
position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
#block-10
{position: relative;
top: 45px!important;
padding-left:60%;
font-weight:bold !important;
z-index:3;
line-height:4px;
}
/*.phonenum
{
background-color:white;
position:absolute;
top:5px;
z-index:-1;
}*/
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:120px;
width:140px;
float:right;
}
.centerlink {
text-align: center;
}
.footer
{
color:black!important;
font-size:20px;
}
.fb
{
background:white;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
float:right;
}
}
@media screen and (max-width: 319px)
{
.container
{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:20em;
text-align:left;
display:inline-block;
background-color:white;
}
.words
{
width:100%;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
您需要将meta viewport标记放入html头部，类似于：
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
溢出-x：隐藏；隐藏水平滚动条是的，这不是你要求的吗？不，我不希望用户在访问我的站点时能够在移动设备上从左向右移动。如果你想在你的移动设备上访问我的网站sandbox.mercomcorp.com，你可以从一边移动到另一边，而不像如果你的网站不能从一边移动到另一边@SantiagoRebellaI补充说，出于某种原因，它也不能working@CandiceMoses我正在查看你的网站，调整大小，对我来说效果很好，我看不到任何滚动，也看不到滚动的可能性我可以问一下你在用什么设备吗？也许这只是我的device@CandiceMoses三星galaxy s2，并在三星galaxy pocket中试用，这两个版本都很好，非常感谢我有一个galaxy s5，由于某些原因，它在页面上工作，看起来像是缩小了，当我刷新页面时，它又回到了原来的方式。它可能只是我的设备。。