نمایش محتوای متفاوت با دسکتاپ در نسخه موبایل سایت

برنامه نویسی و توسعه CSS
1

سلام بچه ها
ما با CSS می تونیم یه المان رو در نسخه موبایل یا در نسخه های مختلف حذف کنیم و یک المان دیگه رو بجاش نمایش بدیم درسته ؟
الان من یک المان برای نسخه دسکتاپم دارم با ظاهری متناسب با نسخه دسکتاپ و برای همون بخش المانی داریم متناسب با نسخه موبایل با تنظیمات اون المان می تونم برای موبایل اولی رو غیر فعال کنم و دومی رو برای دسکتاپ، تا اینجا همچی اوکی هست
مشکل اصلی این هستش که هر دو المان در هر دو نسخه در سورس سایت در حال نمایش هستشن و باعث نابودی سئو سایت میشه. چون المان ها دارن 15 20 تا آگهی رو لود می کنن و خب این برنامه تو اکثر صفحات سایت هستش.
کسی راهکاری داره که وقتی من میخوام المانی رو تو موبایل نمایش ندم در سورس هم حذف بشه و کامل نمایش داده نشه ؟
ممنون میشم اگر کسی تجربه داره راهنمایی کنه.

2

سلام

برای هر بخش class یکتا تعریف کنید و بعد برای نسخه تبلت و موبایل دستورات متفاوت بنویسید.

مثلا اگر کلاس تعریف شده برای نسخه دسکتاپ desktop-version هست. از چنین کدی استفاده کنید:

/* For Mobile */
@media screen and (max-width: 540px) {
    .desktop-version{
        display: none;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .desktop-version{
        display: none;
    }
}

به همین تربیت می تونید برای هر نسخه استایل های بیشتری تعریف کنید و دستورات CSS رو برای هر بخش جداگانه تعریف کنید.

3

سلام آقای سیدزاده عزیز ممنونم از پاسخگوییتون، مشکل اینجاست که در سورس سایت لود میشن، و گوگل به جفتش دسترسی داره در نسخه موبایل.
من میخوام کلا توی سورس در موبایل فقط موبایل لود بشه و همینطور در دسکتاپ فقط دسکتاپ لود بشه.

4

سلام خدمت شما
باید برای هر دو نسخه منظور کدنویسی بشه
یعنی اینکه بالفرض برای یک محصول فروشگاه در نسخه دسکتاپ , یک نسخه از آن نیز برای موبایل درج شود
بیشتر قالب و سایت های موجود سعی میکنن نسخه دسکتاپ رو ریسپانسیو کنن و در حالت موبایل نمایش بدهند
شما میتوانید از قطعه کد زیر ( اگر از وردپرس استفاده میکنید) برای نمایش جداگانه سایت در هر نسخه ( موبایل و یا دسکتاپ) استفاده کنید:
(توجه اگر از اسکریپت اختصاصی استفاده میکنید باید کدنویسی مجزا انجام شود )


<?php
if( wp_is_mobile() ) 
{
	// در این قسمت میتوانید قطعه کد های موردنظرتون برای حالت موبایل را درج کنید
	
}
else 
{
	
	// در این قسمت هم میتوانید قطعه کد های موردنظر برای نمایش در حالت دسکتاپ استفاده کنید
	
}

برای اسکریپت های php نیز میتوانید از کد زیر استفاد کنید :



<?php
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) 
{
		// در این قسمت میتوانید قطعه کد های نمایش در حالت دسکتاپ را درج کنید
} 
elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
		|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) 
{
		// در این قسمت هم میتوانید  کد های حالت موبایل را قرار بدید
}
1 پسندیده
5

خیلی ممنونم ازت حسین جان خیلی لطف کردی