Twitter bootstrap 针对移动设备的Css响应式设计'；不要向下滚动
我正在尝试使用响应式css处理一些媒体查询资源。问题是移动屏幕不能以下面的320x480分辨率向下滚动。你知道为什么它没有向下滚动吗 致以最良好的祝愿Twitter bootstrap 针对移动设备的Css响应式设计'；不要向下滚动,twitter-bootstrap,css,responsive-design,Twitter Bootstrap,Css,Responsive Design,我正在尝试使用响应式css处理一些媒体查询资源。问题是移动屏幕不能以下面的320x480分辨率向下滚动。你知道为什么它没有向下滚动吗 致以最良好的祝愿 /*======================== RESPONSIVE ========================*/ @media only screen and (max-device-width: 320px) and (max-device-height:480px) and (orientation: portrait) {
/*======================== RESPONSIVE ========================*/
@media only screen and (max-device-width: 320px) and (max-device-height:480px) and (orientation: portrait) {
body {
font-size: 14px;
border: 0 solid transparent;
}
h1, .intro h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
.intro p {
font-size: 14px;
}
.intro p span {
width: 60px;
}
section h1 {
font-size: 2.5em;
margin-top: 0;
}
.logo {
text-align: center;
margin: 0 auto 40px auto;
font-family: ethnocentric, sans-serif;
font-size: 55px;
}
.pics {
padding-left: 0;
}
.col-md-3 {
padding-left: 0;
}
.partnerRow {
padding-left: 0;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
ul, ol {
padding: 0;
}
}
IOTERM
贝兹
NESNELERİNİinternetİ（物联网）
ÖZÜMLERİ
ŞİRKETİYİZ，
BİZ IOTERMÜZ
达哈伊
BİR DÜNYAİİN
BÜTÜNLEŞK BİLGİ
萨伊约鲁兹。
-
-
-
-
-
VİZYON ve AMAÇ
维兹扬
IoTerm olarak biz，müterilerimizin ihtiyaılarınıBelleryerek，onlara en Uquiun，优化edilmişIoTünleriyle，hizmet veçzüm sunarken müterilerimizin işlerine deĚer kataraküstünl kleri kleri inçaba sarf ederiz
阿马萨
- hizmet vererek araştırma，geliştirme ve operasyonelçzım ihtiyaılarınıBelillemelinelde yardımc olmak
- Teknolojik gelişmeleri yakţandan takip ederekşirketlere，işletmelere danşmanlţk sağlayarak değer katmak
- irketlerin，doğru yöntemi Belillemelinede yardımcıolmak ve bu süreçte etkin rolüstlenmek的kendiçzüm veürünleri iç组织
乔祖姆·奥塔克拉姆
ÖZÜMLERİMİZ
阿克勒
-
阿克尔奥托帕克酒店
-
阿克尔·艾德·恩拉特马
-
特拉菲克塞克勒
艾尔切夫
-
哈瓦·基里利奥伊
-
奥曼·扬恩·阿尔格喇嘛
-
德普雷姆·埃尔肯·特希斯
艾尔苏
-
苏斯泽恩特拉
-
内希尔·塔克恩拉尔
-
Deniz Kirlilik Düzeyleri
阿克尔ıı×çüm
-
苏阿克什
-
哈兹内塞维耶西
-
艾尔伊兹加拉
阿克尔塔尔姆酒店
-
居布雷姆
-
Şarap Kalite Artırılması
<!-- Overlay -->
<div id="firefly" class="bg-overlay">
<canvas id="star-canvas"></canvas>
</div>
<!-- End Overlay -->
<div class="lang">
<a href="#turkish" onclick="window.lang.change('tr'); return false;"><img src="images/turkey-icon.png" alt="Türkçe" id="tr"></a>
<a href="#english" onclick="window.lang.change('en'); return false;"><img src="images/uk-icon.png" alt="English" id="eng"></a>
</div>
<!-- Header -->
<header>
<div class="intro">
<!-- Site Logo -->
<div class="logo">IOTERM</div>
<!-- End Site Logo -->
<!-- Rotator Title -->
<div id="rotate">
<h1 class="rotate" lang="tr">
BİZ
<span lang="tr">NESNELERİN İNTERNETİ (IOT)</span>
<br>ÇÖZÜMLERİ
<br>ŞİRKETİYİZ,
<span lang="tr">BİZ IOTERM'ÜZ</span>
</h1>
<h1 class="rotate" lang="tr">
DAHA İYİ
<br>
<span lang="tr">BİR DÜNYA İÇİN</span>
<br lang="tr">BÜTÜNLEŞİK BİLGİ
<span lang="tr">SAĞLIYORUZ.</span>
</h1>
</div>
<!-- End Rotator Title -->
</div>
<!-- Nav -->
<nav>
<ul class="navigation">
<li class="link bottom move" id="iot_link">
<a href="#iot"><span lang="tr">IOT NEDİR</span></a>
</li>
<li class="link bottom move" id="about_link">
<a href="#about"><span lang="tr">HAKKIMIZDA</span></a>
</li>
<li class="link bottom move">
<a href="#contact"><span lang="tr">İLETİŞİM</span></a>
</li>
<li class="link bottom move" id="solutions_link">
<a href="#solutions"><span lang="tr">ÇÖZÜMLERİMİZ</span></a>
</li>
<li class="link bottom move" id="products_link">
<a href="#products"><span lang="tr">ÜRÜNLERİMİZ</span></a>
</li>
</ul>
</nav>
<!-- End Nav -->
</header>
<!-- End Header -->
<!-- About Section -->
<section id="about" data-direction="from-right">
<div class="content h4c">
<a href="#" class="close"></a>
<h1>
<span lang="tr">VİZYON ve AMAÇ</span>
</h1>
<div class="row text-center">
<div class="col-md-8 col-md-offset-2 h4c">
<h4 lang="tr">Vizyon</h4>
<p lang="tr">IoTerm olarak biz, müşterilerimizin ihtiyaçlarını belirleyerek, onlara en uygun, optimize edilmiş IoT ürünleriyle, hizmet ve çözüm sunarken müşterilerimizin işlerine değer katarak üstünlükleri için çaba sarf ederiz.</p>
<h4 lang="tr">Amaç</h4>
<ul style="list-style-type: none;">
<li lang="tr">Organizasyonlara çözüm ortağı gibi hizmet vererek araştırma, geliştirme ve operasyonel çözüm ihtiyaçlarını belirlemelerinde yardımcı olmak.</li>
<li lang="tr">Teknolojik gelişmeleri yakından takip ederek şirketlere, işletmelere danışmanlık sağlayarak değer katmak.</li>
<li lang="tr">Şirketlerin, organizasyonların kendi çözüm ve ürünleri için doğru yöntemi belirlemelerinde yardımcı olmak ve bu süreçte etkin rol üstlenmek.</li>
</ul>
</div>
</div>
<h4 lang="tr">Çözüm Ortaklarımız</h4>
<div class="row partnerRow">
<div class="col-md-2 thumbnailImage">
<a href="http://www.bulutistan.com" target="_blank">
<img src="images/bulutistan.png" class="bulutistanImg" alt="Bulutistan">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.datamarket.com.tr" target="_blank">
<img src="images/datamarket.png" class="datamarketImg" alt="DataMarket">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.esq.com" target="_blank">
<img src="images/esq.png" class="esqImg" alt="ESQ">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.libelium.com" target="_blank">
<img src="images/libelium.png" class="libeliumImg" alt="Libelium">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.microsoft.com" target="_blank">
<img src="images/microsoft.png" class="microsoftImg" alt="Microsoft">
</a>
</div>
<div class="col-md-2 thumbnailImage">
<a href="http://www.turkcell.com.tr" target="_blank">
<img src="images/turkcell.png" class="turkcellImg" alt="Turkcell">
</a>
</div>
</div>
</div>
</section>
<!-- End About Section -->
<!-- Solutions Section -->
<section id="solutions" data-direction="from-left">
<div class="container">
<a href="#" class="close"></a>
<h1>
<span lang="tr">ÇÖZÜMLERİMİZ</span>
</h1>
<div class="row solutionsRow">
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Akıllı Şehirler</h2>
<div id="right" class="pics">
<img class="img-center" src="images/smart-cities1.png" width="168" height="168" alt="Akıllı Şehir"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Akıllı Otopark
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Akıllı Aydınlatma
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Trafik Sıkışıklığı
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad1">
<h2 lang="tr" class="solutions">Akıllı Çevre</h2>
<div id="right1" class="pics">
<img class="img-center" src="images/smart-env.jpg" width="168" height="168" alt="Akıllı Çevre"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Hava Kirliliği
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Orman Yangın Algılama
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Deprem Erken Teşhis
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Akıllı Su</h2>
<div id="right2" class="pics">
<img class="img-center" src="images/smart-water.jpg" width="168" height="168" alt="Akıllı Su"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Su Sızıntıları
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Nehir Taşkınları
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Deniz Kirlilik Düzeyleri
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad1">
<h2 lang="tr" class="solutions">Akıllı Ölçüm</h2>
<div id="right3" class="pics">
<img class="img-center" src="images/smart_meter.jpg" width="168" height="168" alt="Akılı Ölçüm"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Su Akışı
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Hazne Seviyesi
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Akıllı Izgara
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Akıllı Tarım</h2>
<div id="right4" class="pics">
<img class="img-center" src="images/smart-agriculture1.png" width="168" height="168" alt="Akıllı Tarım"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Gübreleme
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Şarap Kalite Artırılması
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Meteoroloji İstasyonu Ağı
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad">
<h2 lang="tr" class="solutions">Endüstriyel Kontrol</h2>
<div id="right6" class="pics">
<img class="img-center" src="images/smart-industry.jpg" width="168" height="168" alt="Endüstriyel Kontrol"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> İç Hava Kalitesi
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Sıcaklık İzleme
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Ozon Varlığı
</li>
</ul>
</div>
</div>
<div class="col-md-3 no-pad1">
<h2 lang="tr" class="solutions">Acil Durumlar</h2>
<div id="right7" class="pics">
<img class="img-center" src="images/smart-security.jpg" width="168" height="168" alt="Acil Durumlar"/>
<ul class="solutions-ul">
<li lang="tr">
<i class="fa fa-caret-right"></i> Çevre Erişim Kontrolü
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Patlayıcı ve Tehlikeli Gazlar
</li>
<li lang="tr">
<i class="fa fa-caret-right"></i> Radyasyon Seviyeleri
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- End Solutions Section -->
<!-- Products Section -->
<section id="products" data-direction="from-left">
<div class="container containerProducts">
<a href="#" class="close"></a>
<h1>
<span lang="tr">ÜRÜNLERİMİZ</span>
</h1>
<div class="container-fluid">
<div class="row ">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row item active">
<div>
<div class="row ">
<div class="col-md-4" id="img1">
<a href="#"><img class="img-center" src="images/waspmote_pro_t.png" alt="waspmote" ></a>
</div>
<div class="col-md-4" id="img2">
<a href="#"><img class="img-center" src="images/waspmote_exp_radio_board_2-375_t.png" alt="waspmote" ></a>
</div>
<div class="col-md-4" id="img3">
<a href="#"><img class="img-center" src="images/u13_gw_t.png" alt="waspmote" ></a>
</div>
</div>
</div>
<div class="caption row ">
<div class="col-md-12">
<h3 class="productHeight">Waspmote</h3>
</div>
<div class="row" id="desc">
<div class="col-md-4" id="exp1">
<ul style="list-style-type: none;" class="productSize">
<li lang="tr">
<i class="fa fa-share-alt"></i> Tüm sensörlere bağlanabilir
</li>
<li lang="tr">
<i class="fa fa-rss"></i> Tüm wi-fi teknolojilerini destekler
</li>
<li lang="tr">
<i class="fa fa-cloud"></i> Bulut teknolojilerine uyumlu
</li>
</ul>
</div>
<div class="col-md-4" id="exp2">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Ultra düşük güç (0.7uA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 100+ Sensör uyumluluğu
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Kablosuz uzaktan programlama
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Şifreleme Kütüphaneleri (AES, RSA)
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> Encapsulated line available
</li>
</ul>
</div>
<div class="col-md-4" id="exp3">
<ul style="list-style-type: none;" class="waspmote">
<li lang="tr">
<i class="fa fa-check-circle"></i> Desteklediği Protokoller: RS-232,RS-485,Modbus,CAN Bus, 4-20mA
</li>
<li lang="tr">
<i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0
</li>
</ul>
</div>
</div>
</div>
</div><!-- /Slide1 -->
<div class="row item">
<div class="bannerImage">
<iframe width="450" height="282" class="embed-responsive-item" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&controls=0&showinfo=0"></iframe>
</div>
<div class="caption row" id="yTube1">
<div class="col-md-12">
<h3 lang="tr" class="productHeight" id="utube2">Waspmote Sensör Kartı</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps1">
<p lang="tr">Waspmote kartı için 50'den fazla sensör mevcuttur. </p>
</div>
</div>
</div>
</div><!-- /Slide2 -->
<div class="row item">
<div class="bannerImage">
<iframe width="450" height="270" class="embed-responsive-item" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&controls=0&showinfo=0"></iframe>
</div>
<div class="caption row" id="yTube2">
<div class="col-md-12">
<h3 lang="tr" class="productHeight" id="utube1">Waspmote Tak ve Algıla</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps" id="wspmote">
<p lang="tr">Yeni Waspmote Tak ve Algıla geliştiricilerin elektroniğin zorluklarından kurtarıp sevislere ve uygulamalara odaklanmasını sağlar.</p>
</div>
</div>
</div>
</div><!-- /Slide4 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div>
</section>
<!-- End Products Section -->
<!-- Contact Section -->
<section id="contact" data-direction="from-bottom">
<div class="container fill containerContacts">
<a href="#" class="close"></a>
<h1>
<span lang="tr">İLETİŞİM</span>
</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h4 lang="tr">BİZE E-POSTA GÖNDEREBİLİR VEYA AŞAĞIDAKİ FORMU DOLDURABİLSİNİZ. SİZE EN KISA SÜREDE GERİ DÖNÜŞ YAPACAĞIZ.</h4>
<!-- Begin Phone -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-mobile fa-2x"></i>
<br>
+90 (530) 1407342
<br>
+90 (216) 6888616
</div>
<!-- End Phone -->
<!-- Begin Email -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-envelope-o fa-2x"></i>
<br>
contact@ioterm.com
</div>
<!-- End Email -->
<!-- Begin Address -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-home fa-2x"></i>
<br>
IOTERM
<br>
İstanbul,
<span lang="tr">Türkiye</span>.
</div>
<!-- End Address -->
<!-- Begin Address -->
<div class="newline col-sm-3 text-center">
<i class="fa fa-home fa-2x"></i>
<br>
IOTERM
<br>
Boston,
<span lang="tr">ABD</span>.
</div>
<!-- End Address -->
<div class="clearfix"></div>
<div class="contactForm">
<!-- Start Contact Form -->
<form id="contactForm" action="#" method="post" role="form">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<input id="formName" type="text" class="input required" name="name" placeholder="Adınız" lang="tr">
</div>
<div class="form-group">
<input id="formEmail" type="email" class="input required" name="email" placeholder="E-posta adresiniz" lang="tr">
</div>
<div class="form-group">
<input id="phone" type="text" placeholder="Telefon numaranız" value="" size="30" name="phone" lang="tr">
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<textarea id="message" class="textarea required" name="message" rows="3" cols="40" placeholder="Sorunuz" lang="tr"></textarea>
</div>
<button value="Submit" id="submit" class="btn btn-green-border btn-lg" type="submit" lang="tr">GÖNDER</button>
</div>
</form>
<div class="successMsg"></div>
<!-- End Contact Form -->
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
<!-- IOT Section -->
<section id="iot" data-direction="from-right">
<div class="content containerIot">
<a href="#" class="close"></a>
<h1>
<span lang="tr">IOT NEDİR</span>
</h1>
<div class="row text-center">
<div class="col-md-8 col-md-offset-2">
<p class="iot-font" lang="tr">Nesnelerin İnterneti (Internet of Things, kısaca IoT), fiziksel nesnelerin birbirleriyle veya daha büyük sistemlerle bağlantılı olduğu iletişim ağıdır.</p>
<img id="zoom" src="images/sw.png" data-zoom-image="images/sw_.jpg" width="450" height="253" alt="iot"/>
</div>
</div>
</div>
</section>
<!-- End IOT Section -->
</body>
@media only screen and (max-width: 767px) {
html, body {
overflow-y: auto !important;
}
body {
height: auto !important;
}
header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
min-height: 550px;
}
.intro h1 {
font-size: 40px;
}
.intro p {
font-size: 16px;
}
.intro p span {
width: 80px;
}
section {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 2 !important;
opacity: 1 !important;
}
section .content, section .container {
opacity: 1 !important;
}
.navigation {
display: none;
}
section {
padding: 4em 0;
}
#solutions {
padding: 0;
}
#solutions h1 {
background: none !important;
height: auto;
padding: 0px !important;
}
.close {
display: none;
}