onurhanerk
Centipat
- Katılım
- 11 Ocak 2020
- Mesajlar
- 3
Merhaba. Bir web sayfası geliştirmeye çalışıyorum. Bu sabaha kadar herhangi bir sorun olmadan tasarımımda ilerliyordum. Lakin bugün iPhone cihazlarda nedense istediğim görüntüyü alamadım. Sanki CSS yüklenmiyor, ve resimleri path ile çekemiyor gibi. Ancak iPhone cihaz üzerinden sayfaya ilk girişte ekranın görünen bölmesi sorunsuz bir şekilde yükleniyor. Anlatabildim mi bilmiyorum lakin ne kadar uğraştıysam çözemedim. Yardımcı olabilecek olursa gerçekten çok sevinirim.
Herhangi bir Android cihazdan MacBook Safari üzerinden ve Windows üzerinden sorunsuz bir görüntüleme elde edebiliyorum. Lakin iPhone üzerinde ne yazık ki...
(Ilk resim iPhone)
Yan menu. CSS.
İndex. CSS.
İndex.php.
Sorunun index sayfasında olduğunu düşünmediğim için hepsini atmadım.
Dilerseniz iPhone cihazdan onurhanerk.com adresine giriş yaparak sorunu daha rahat görebilirsiniz. Yardımlarınız için şimdiden teşekkür ederim.
ID: Zxzxzx Pass: Zxzxzx.
Herhangi bir Android cihazdan MacBook Safari üzerinden ve Windows üzerinden sorunsuz bir görüntüleme elde edebiliyorum. Lakin iPhone üzerinde ne yazık ki...
(Ilk resim iPhone)
Yan menu. CSS.
CSS:
@media screen and (max-width:980px){
.yan{
width:100vw;
height: 60px;
}
.open{
display:none;
margin-left: 0px;
margin-top:60px;
height:0px;
}
.yan:hover .open{
display:inline-block;
width: 0vw;
}
.open ul li{
background-color:#000;
display:block;
width:100vw;
text-align:right;
transform:translate(-10px,0);
}
.yan [class*="menu"]{
justify-content: flex-end;
}
.yan:hover [class*="menu"]{
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
}İndex. CSS.
Kod:
#page-content {
position: absolute;
margin:5px;
padding: 0px;
padding-top:20px;
z-index:0;
display: inline-block;
left: 50.5%;
transform: translateX(-50%);
height: 90vh;
box-sizing: border-box;
overflow: auto;
border-radius: 20px;
}
#box-color {
background-color: rgba(0, 0, 0, 0.80);
}
#page-box {
position: relative;
width: 40vw;
height: 100%;
top: 50%;
transform: translate(0, -50%);
border: 0px;
border-radius: 20px;
}
.post-box {
position:relative;
display: block;
width: 100%;
background-color: rgba(0, 0, 0, 0.80);
border-radius: 20px;
margin-bottom: 10px;
overflow: hidden;
}
.post-header {
position: relative;
display: block;
width: 100%;
height: 50px;
border-bottom: 0.5px solid rgba(255,255,255,0.2);
}
.post-account {
position: absolute;
color: dodgerblue;
top: 50%;
transform: translate(0, -50%);
left: 20px;
font-size: 19px;
text-transform: capitalize;
letter-spacing: 2px;
}
.post-media {
border-bottom: 0px solid #fff;
overflow:hidden;
}
.post-media img{
width: 100%;
pointer-events: none;
}
.post-content{
min-height: 40px;
position:relative;
}
.post-content-left{
display:inline-block;
position:relative;
width:74%;
padding-left: 20px;
}
.post-content-right{
display:inline-block;
position:relative;
width:23%;
text-align: right;
}
.post-content span{
display:inline-block;
color: #F0F8FF;
font-size: 15px;
transform: translate(0,-5px);
text-transform: none;
}
.heart-icon{
display:inline-block;
color: #F0F8FF;
font-size: 25px;
margin-left:10px;
margin-right: 5px;
margin-top:5px;
}
#black-div{
height:20px;
}
.share-post {
position: fixed;
bottom: 0px;
width: 50%;
height: 8vh;
background-color: #000;
left: 51%;
transform: translateX(-50.5%);
border:20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.share-post a{
text-decoration: none;
color: #f8f9fa;
}
@media screen and (max-width:980px){
#page-content {
position:relative;
width: 100vw;
height: calc(100% - 130px);
left: 49%;
}
#page-box{
transform: translate(0, 0);
left:0;
width:100vw;
height:calc(84vh - 140px);
margin-bottom:50px;
}
.post-header{
height: 50px;
}
.post-account{
left: 20px;
font-size: 19px;
}
.post-content{
min-height: 40px;
}
.share-post{
left:50%;
width: 100vw;
height: 60px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
z-index:200;
text-align:center;
}
.post-content span{
font-size: 20px;
transform: translate(0,-4px);
}
.heart-icon{
font-size: 25px;
margin-left:20px;
margin-right: 10px;
margin-top:5px;
}
}İndex.php.
Kod:
<body>
<div class="yan">
<span class="menu"><i class="fas fa-bars "></i></span>
<div class="open ">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Galery</li>
<li>Content</li>
<li>About us</li>
<a href="http://onurhanerk.com""><li value="click"onclick="logout()">Sign out</li></a>
</ul>
</div>
</div>
<div id="page-content">
<div id="page-box ">
<div class="post-box" id="box-color">
<div class="post-header">
<div class="post-account">
<p>cyborglad</p>
</div>
</div>
<div class="post-media">
<img src="https://i.hizliresim.com/Vj6jJS.jpg"/>
</div>
<div class="post-content">
<div class="post-content-left">
<span>X likes</span>
</div>
<div class="post-content-right">
<i class="far fa-heart heart-icon"></i>
</div>
</div>
</div>Sorunun index sayfasında olduğunu düşünmediğim için hepsini atmadım.
Dilerseniz iPhone cihazdan onurhanerk.com adresine giriş yaparak sorunu daha rahat görebilirsiniz. Yardımlarınız için şimdiden teşekkür ederim.
ID: Zxzxzx Pass: Zxzxzx.
