بدست آوردن عرض و ارتفاع بر اساس صفحه نمایش کاربر

شاید خیلی وقت ها برای شما هم پیش آمده باشد که قصد داشته باشید ارتفاع صفحه خودتون رو ( height ) بر اساس صفحه نمایش کاربر تنظیم کنید ، درسته ممکنه خیلی ابتدایی باشه ولی هدف از این آموزش برای دوستان عزیزی که تازه شروع به کار کردن هست…

در چه شرایطی ممکنه این حالت پیش بیاد ؟

مثلا قصد دارید که سایتی طراحی کنید که محتوا در وسط صفحه ثابت باشه و یا سایت هایی که ریسپانسیو کار می کنند و…

خوب برای این کار می تونید از یک دستور جاوا استفاده کنید که به راحتی این کار رو براتون انجام میده :

<script>
var ertefae_safhe = $(window).height();
$('#content').css('height' , ertefae_safhe + 'px');
</script>

در این دستور به جای ‘#content می توانید اسم دایوی که قصد دارید ارتفاع بر روی آن اعمال شود را قرار دهید.

برای خود من پیش آمده بود که می خواستم ارتفاع صفحه ای که بر اساس صفحه نمایش کاربر بدست می آید رو ۱۰۰ پیکسل کمتر کنم و بعد در قسمت مورد نظر خودم اعمال کنم ، که برای انجام این کار از کد زیر استفاده می کنید  :

<script>
var ertefae_safhe = $(window).height();
ertefae_safhe = ertefae_safhe - 100 ;
$('#content').css('height' , ertefae_safhe + 'px');
</script>

خوب برای بدست آوردن عرض صفحه هم بر اساس صفحه نمایش کاربر دقیقا می توانید از همین قطعه کد استفاده کنید و به جای height از width استفاده کنید…

<script>
var arze_safhe = $(window).width();
$('#content').css('width' , arze_safhe + 'px');
</script>

برای استفاده ، کد مورد نظر خودتون رو قبل از تگ </body> قرار بدهید.

امیدوارم این قطعه کد کاربردی باشه براتون

با تشکر از حسین هاشمی