滚动移动设备会导致内容缩小
我目前正在对此网站进行重新设计，当我在移动设备上向下滚动屏幕时内容区域宽度将缩小时，我遇到此问题。
只有当我使用实际的移动设备时才会这样做，如果我使用Chrome内置的移动设备测试程序，则可以按预期工作。
我尝试将div的最小宽度设置为100％，但它并没有解决问题。
请注意，这是我第一次从头开始进行完整的网站构建，而且对于Web开发来说还是比较新的。
我添加了一个网站的工作示例，除了导航栏JavaScript和页面图像。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
$(document).ready(function() {
//Page Layout change events
if (isMobile.any()) {
$('#super-container').removeClass("super-container").addClass("super-container-mobile");
$('#header-row').removeClass("column-row").addClass("column-row-mobile");
$('#header').removeClass("header-container").addClass("header-container-mobile");
$('#main-row').removeClass("row").addClass("row-mobile");
$('#footer-row').removeClass("row").addClass("row-mobile");
$('#main-content').removeClass("main-content-container").addClass("main-content-container-mobile");
$('#RightBar').removeClass("right-bar").addClass("right-bar-mobile");
$('#footer-row').removeClass("footer").addClass("footer-mobile");
} else {
var viewWidth = $(window).width();
if (viewWidth < 870) {
$('#header').removeClass("header-container").addClass("header-container-smaller");
$('#main-content').removeClass("main-content-container").addClass("main-content-container-smaller");
$('#RightBar').removeClass("right-bar").addClass("right-bar-smaller");
$('#footer-row').removeClass("footer").addClass("footer-smaller");
}
}
});.super-container-mobile {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: justify;
}
.column-row-mobile {
width: auto;
height: 100%;
margin: 0 auto;
background-color: #2E4986;
}
.header-container-mobile {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
background-color: #2E4986;
color: #fff;
margin-top: .25em;
}
.row-mobile {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
min-width: 100%;
}
.main-content-container-mobile {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
color: #000;
}
.right-bar-mobile {
display: block;
width: 70%;
height: 100%;
margin: 0 auto;
min-width: 70%;
font-size: 1.75em;
color: #FFF;
}
.right-bar-mobile .rightbar-well {
font-size: .75em;
}
.right-bar-mobile .right-bar-header {
font-size: 1em;
}
.footer-mobile {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #2E4986;
color: #FFF;
font-size: .75em;
}
.footer-mobile p {
padding: .5em;
}
.content-cell-mobile {
display: block;
width: 95%;
height: 100%;
margin: 0 auto;
margin-top: 1.25em;
text-align: center;
min-width: 95%;
}
.content-cell-mobile .main-content-body {
font-size: 1.1em;
}
.main-content-header-mobile {
color: #000;
font-size: 1.3em;
text-decoration: underline;
}
.right-bar-header-mobile {
font-size: 1.8em;
color: #FFF;
}
.rightbar-well {
padding: 1em;
background-color: #2E4986;
border-radius: 1em;
text-align: center;
color: #ffffff;
background-color: #2E4986;
box-shadow: 0 0 8px #212121;
margin-top: .75em;
margin-bottom: .75em;
}
.rightbar-well a {
color: #ffffff;
}
.body-img {
height: 8em;
width: auto;
}
.body-img:hover {
transform: scale(1.5, 1.5);
transform-origin: 0 0;
}
.company-header {
font-size: 3em;
font-weight: 600;
}
.sub-header {
margin-top: .1em;
font-size: 1.25em;
}
.header-line {
width: 65%;
margin: 0 auto;
height: .05em;
background-color: #FFF;
margin-top: .2em;
border-radius: 2px;
box-shadow: 2px 2px 31px 1px rgba(148, 148, 148, 1);
}<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Header-Master">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community Action, Inc.</title>
<style>
.fixed-inv {
margin: 0 auto;
width: auto;
display: none;
}
.fixed-vis {
margin: 0 auto;
width: auto;
}
.Links {
font-size: 1.1em;
}
.Links-mobile {
font-size: 1.75em;
}
</style>
</head>
<body id="mainbody">
<!-- Super Container that holds all of the row containers -->
<div id="super-container" class="super-container-mobile">
<!--Header Row container -->
<div id="header-row" class="column-row-mobile">
<div id="header" class="header-container-mobile">
<div class="logo-container">
<img alt="CAI Logo" src="./Images/Basic-logo.png" class="header-img" id="logo">
</div>
<div id="header-text">
<div>
<span class="company-header">Community Action, Inc</span>
</div>
<div style="margin-top: .5em;">
<span class="sub-header">Primarily Serving Clarion and Jefferson Counties, Pennsylvania</span>
</div>
</div>
</div>
<div class="header-line"></div>
<div id="nav" class="stellarnav light mobile"><a href="#" class="menu-toggle full"><i class="fa fa-bars"></i> Menu</a>
<ul>
<li><a href="home.aspx">Home</a></li>
<li class="has-sub"><a href="#">About</a>
<ul>
<li class="has-sub"><a href="#">Annual Report</a>
<ul>
<li><a href="uploads\Fiscal\01-02 Annual Report.pdf">2014 - 2015</a></li>
<li><a href="uploads\Fiscal\01-02 Annual Report.pdf">2013 - 2014</a></li>
<li><a href="uploads\Fiscal\Annual Report 2012 - 2013.pdf">2012 - 2013</a></li>
<li><a href="uploads\Fiscal\11-12 Annual Report.pdf">2011 - 2012</a></li>
<li><a href="uploads\Fiscal\2010-2011 Annual Report.pdf">2010 - 2011</a></li>
<li><a href="uploads\Fiscal\2009-2010 Annual Report.pdf">2009 - 2010</a></li>
<li><a href="uploads\Fiscal\08-09-Annual-Report.pdf">2008 - 2009</a></li>
<li><a href="uploads\Fiscal\07-08-Annual-Report.pdf">2007 - 2008</a></li>
<li><a href="uploads\Fiscal\06-07-Annual-Report.pdf">2006 - 2007</a></li>
<li><a href="uploads\Fiscal\05-06-Annual-Report.pdf">2005 - 2006</a></li>
<li><a href="uploads\Fiscal\04-05 Annual Report.pdf">2004 - 2005</a></li>
<li><a href="uploads\Fiscal\03-04 Annual Report.pdf">2003 - 2004</a></li>
<li><a href="uploads\Fiscal\02-03 Annual Report.pdf">2002 - 2003</a></li>
<li><a href="uploads\Fiscal\01-02 Annual Report.pdf">2001 - 2002</a></li>
</ul><a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a></li>
<li><a href="uploads\Bylaws - Last Revised March 20, 2014.pdf">Bylaws</a></li>
<li><a href="uploads\Charitable Organization Certificate.pdf">Charitable Organization Certificate</a></li>
<li><a href="history.aspx">History</a></li>
<li><a href="uploads\Project Guide - October 25 2013.pdf">Project Guide</a></li>
<li class="has-sub"><a href="#">Strategic Plan</a>
<ul>
<li><a href="uploads\Strategic Plan.pdf">Strategic Plan</a></li>
<li><a href="uploads\StrategicPlanSummary.pdf">Strategic Plan Summary</a></li>
</ul><a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a></li>
<li><a href="links.aspx">Resources</a></li>
<li><a href="board.aspx">Board</a></li>
<li><a href="Financial.aspx">Financials</a></li>
</ul><a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a></li>
<li class="has-sub"><a href="#">News</a>
<ul>
<li><a href="Newsletters.aspx">Newsletters</a></li>
<li><a href="NewNewsRelease.aspx">News Releases</a></li>
</ul><a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a></li>
<li><a href="project.aspx">Projects</a></li>
<li><a href="locations.aspx">Locations</a></li>
<li><a href="employment.aspx">Employment</a></li>
<li><a href="emergencies.aspx">Emergencies</a></li>
<li class="has-sub"><a href="#">Staff Only</a>
<ul>
<li><a href="http://development2.jccap.org/website_test/admin">Administration</a></li>
<li><a href="https://mail.jccap.org/owa">Outlook Web App</a></li>
<li><a href="https://staff.jccap.org">Staff Portal</a></li>
</ul><a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a></li>
<li><a href="contact.aspx">Contact Us</a></li>
</ul>
</div>
</div>
<br>
<br>
<!-- Main Row container -->
<div id="main-row" class="row-mobile">
<div id="main-content" class="main-content-container-mobile">
<div id="MainContentpnl">
<div class="content-cell-mobile">
<div class="main-content-header-mobile">Job Announcements</div>
<div class="Links-mobile"><a href="http://development2.jccap.org/NEWSITE_TEST/job_posting.aspx?JID=1100">Accountant</a><br><a href="http://development2.jccap.org/NEWSITE_TEST/job_posting.aspx?JID=1081">Community Services Assistant</a><br><a href="http://development2.jccap.org/NEWSITE_TEST/job_posting.aspx?JID=1061">Information Technology Support Specialist</a><br>
<a href="http://development2.jccap.org/NEWSITE_TEST/job_posting.aspx?JID=1057">Information Technology Manager</a><br></div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Free Home Weatherization</span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-body">
<p>Community Action, Inc. is accepting weatherization applications from Clarion, Indiana, and Jefferson County residents. Weatherization is a free government funded service intended to make your home more energy efficient and comfortable
by stopping ai...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1542">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names INDIANA County Senior Corps-RSVP June Volunteer of the Month</span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(579 );"><img src="./Images/New_Release/1548_Image.jpeg" alt="Community Action, Inc. announced Lawrence Rager of Indiana was selected to be the Indiana County Senior Corps-RSVP Volunteer of the Month for June." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Lawrence Rager of Indiana was selected to be the Indiana County Senior Corps-RSVP Volunteer of the Month for June. Lawrence has been a member of the Senior Corps-RSVP since October 2014 volunteering for
the Community ...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1548">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names INDIANA County Senior Corps-RSVP August Volunteer of the Month </span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(582 );"><img src="./Images/New_Release/1553_Image.jpeg" alt="Eleanor Haney of Indiana was selected to be the Indiana County Senior Corps-RSVP Volunteer of the Month for August." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Eleanor Haney of Indiana was selected to be the Indiana County Senior Corps-RSVP Volunteer of the Month for August. Eleanor has been a member of the Senior Corps-RSVP since April 2001 volunteering for Aging
Services, ...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1553">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names JEFFERSON County Senior Corps-RSVP August Volunteer of the Month </span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(583 );"><img src="./Images/New_Release/1554_Image.jpeg" alt="Tom Brandon of Brookville was selected to be the Jefferson County Senior Corps-RSVP Volunteer of the Month for August." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Tom Brandon of Brookville was selected to be the Jefferson County Senior Corps-RSVP Volunteer of the Month for August. Tom has been a member of the Senior Corps-RSVP since October 2013 volunteering for
Jefferson Count...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1554">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names CLARION County Senior Corps-RSVP August Volunteer of the Month </span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(585 );"><img src="./Images/New_Release/1556_Image.jpeg" alt="Betty Siegel of Leeper was selected to be the Clarion County Senior Corps-RSVP Volunteer of the Month for August." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Betty Siegel of Leeper was selected to be the Clarion County Senior Corps-RSVP Volunteer of the Month for August. Betty has been a member of the Senior Corps-RSVP since February 2010 volunteering for Clarion
Area Agen...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1556">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names JEFFERSON County Senior Corps-RSVP July Volunteer of the Month </span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(577 );"><img src="./Images/New_Release/1546_Image.jpeg" alt="Louise Deyarmin of Punxsutawney was selected to be the Jefferson County Senior Corps-RSVP Volunteer of the Month for July." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Louise Deyarmin of Punxsutawney was selected to be the Jefferson County Senior Corps-RSVP Volunteer of the Month for July. Louise has been a member of the Senior Corps-RSVP since August 2014 volunteering
for the Punxs...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1546">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names INDIANA County Senior Corps-RSVP July Volunteer of the Month </span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(580 );"><img src="./Images/New_Release/1551_Image.jpeg" alt="Carole Bell of Indiana was selected to be the Indiana County Senior Corps-RSVP Volunteer of the Month for July." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Carole Bell of Indiana was selected to be the Indiana County Senior Corps-RSVP Volunteer of the Month for July. Carole has been a member of the Senior Corps-RSVP since January 2015 volunteering for Aging
Services, Inc...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1551">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Community Action, Inc. Names CLARION County Senior Corps-RSVP July Volunteer of the Month </span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-img">
<a href="javascript:void(0);" onclick="OpenPicture(581 );"><img src="./Images/New_Release/1552_Image.jpeg" alt="Carol Brooks of New Bethlehem was selected to be the Clarion County Senior Corps-RSVP Volunteer of the Month for July." class="body-img"></a>
</div>
<div class="main-content-body">
<p>Community Action, Inc. announced Carol Brooks of New Bethlehem was selected to be the Clarion County Senior Corps-RSVP Volunteer of the Month for July. Carol has been a member of the Senior Corps-RSVP since February 2010 volunteering for
the New Beth...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1552">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">Be the Source of Change! Volunteer Today!</span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-body">
<p>Community Action, Inc.'s Career Development Project needs classroom volunteers and tutors to assist instructors and mentor students who want to improve their reading and math skills. For more information, please contact the Career Development
Projec...
</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1466">Read More</a></div>
</div>
</div>
<div class="content-cell-mobile"><span class="main-content-header-mobile">I Got My GED, You Can Too</span>
<div class="clear"></div>
<div class="left-align">
<div class="main-content-body">
<p>I achieved my GED through Community Action, Inc.’s Career Development Project, and my life has really turned around for the better. I made a quick decision to quit school when I was in the eleventh grade. I tried Cyber School, but it didn’t
work ou...</p><a href="http://development2.jccap.org/NEWSITE_TEST/news_release.aspx?NRID=1519">Read More</a></div>
</div>
</div>
</div>
</div>
<div id="RightBar" class="right-bar-mobile">
<div class="rightbar-well">
<span class="right-bar-header">Mission Statement</span><br><br>Community Action, Inc. will be a community catalyst to provide and coordinate activities which promote family self-sufficiency and advance community prosperity.
</div><br><br>
<div class="rightbar-well">
<span class="right-bar-header">Vision Statement</span><br><br>Community Action, Inc. will be recognized as a premier organization dedicated to solving social and economic problems of the community.
</div><br><br>
<div class="rightbar-well">
<span class="right-bar-header">Contact Information</span><br><br>
<div><a title="Community Action, Inc." href="http://www.jccap.org/Map_Main.aspx">Community Action, Inc.</a></div>
<div>105 Grace Way</div>
<div>Punxsutawney, PA 15767-1209</div>
<div>Phone: (814) 938-3302</div>
<div>Toll Free: 1-800-648-3381</div>
<div><a href="contact@jccap.org">contact@jccap.org</a></div>
</div><br><br>
<div class="padding rightbar-well text-center">
<span class="rightbar-headerText">Newsletters</span><br><br><a href="newsletters/Crossroads Connection Fall 2013 - October 30, 2013.pdf">Crossroads Connection - Fall 2013</a><br><a href="newsletters/Crossroads Connection Fall 2012 - September 26, 2012.pdf">Crossroads - September 2012</a><br>
<a href="newsletters/Senior Corps RSVP - July 2012.pdf">Senior Corps RSVP - July 2012</a><br><a href="newsletters/Crossroads-Connection-Fall-2011-10-26-2011.pdf">Crossroads - October 2011</a><br><a href="newsletters/Senior-Corps-RSVP-Summer-2011-Newsletter.pdf">Senior Corps RSVP - August 2011</a><br>
</div><br><br>
<div class="padding rightbar-well text-center">
<span class="rightbar-headerText">Newsletters</span><br><br><a href="important_notices/Whistleblower Policy - Effective March 20 2014.pdf">Whistleblower Policy</a><br><a href="important_notices/Home Improvement Contractor's Certificate.pdf">Home Improvement Contractor's Certificate</a><br>
<a href="important_notices/Community Action Needs Volunteers.pdf">Community Action Needs Volunteers</a><br><a href="important_notices/Non-Discrimination Delivery of Services Policy - Notice to CAI Consumers - Revised October 30, 2013.pdf">Non-Discrimination Delivery of Services Policy</a><br>
<a href="important_notices/Equal Employment Opportunity Affirmative Action Policy - Revised October 30, 2013.pdf">Equal Employment Opportunity & Affirmative Action Policy Statement</a><br>
</div><br><br></div>
</div>
<!-- Footer Row container -->
<div id="footer-row" class="row-mobile footer-mobile">
<p class="footer-padding">
All persons are provided services without regard to race, color, religious creed, age, sex, ancestry, union membership, sexual orientation, gender identity, national or ethnic origin, disability and without regard to whether the person is a victim of
a violent crime (including domestic violence). Equal Opportunity Employer.
<br>
<br> This site was financed in part by a grant from the federal Department of Health and Human Services under the Administration of the Commonwealth of Pennsylvania, Department of Community and Economic Development.
<br>
<br> The official registration and financial information of Community Action, Inc. may be obtained from the Pennsylvania Department of State by calling toll free, within Pennsylvania, 1-800-732-0999. Registration does not imply endorsement.
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
我可以告诉您的是，当您使用多个设备时，为了响应式设计，您不应该忘记视口标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
将其放在<head>标记
答案 1 :(得分：0)
这是因为你没有保持身体的边缘，也没有保持文本的正当性。
.super-container-mobile {
width: 90%;
height: 100%;
margin: auto 10px;
text-align: justify;}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？