Skip to content

فروردین ۳۰, ۱۳۹۰

۲

بهترین سایز برای طراحی نسخه موبایل وب سایت ها

این روزها استفاده از گوشی های موبایل برای مشاهده صفحات وب با سرعت افزایش یافته و با توجه به پایین بودن سرعت اینترنت موبایلی و همچنین کوچک بودن صفحه نمایش موبایل ها، طراحی نسخه ویژه ای از وب سایت برای مرور در موبایل ها امری اجتناب ناپذیر شده است. مشکلی که در این زمینه پیش میاید این است که هم اکنون گوشی های مختلفی در بازار هستند که هر کدام رزولوشن صفحه متفاوتی را ارائه میکنند، اما شما که نمی توانید برای هر گوشی ، نسخه ویژه ای را طراحی کنید. پس چه باید کرد ؟

ما در کل ۲ دسته گوشی داریم که قابلیت وصل شدن به اینترنت و مرور صفحات وب را دارا هستند:

  • Feature Phones
  • Smart Phones
گوشی های feature phone دسته گوشی هایی هستند که امکانات محدودی برای استفاده از اینترنت دارند و اکثرا از سایر صفحه ۳۲۰×۲۴۰ (و گاهی کوچکتر از این) استفاده میکنند. اکثر گوشیهایی که در سالهای قبل فروخته شده اند، زیرمجموعه این رده هستند. بطور مثال :
  • سری K و C و W سونی اریکسون (۳۲۰×۲۴۰ معروف به QVGA)
  • سری N نوکیا اکثرا  (۳۲۰×۲۴۰) البته سری های قدیمی تر نوکیا مانند ۶۶۰۰ اکثرا (۱۷۶×۲۰۸)بودند.
  • وضعیت سایرین هم اکثرا (۳۲۰×۲۴۰) است و این سایز به نوعی تبدیل به کوچک ترین صفحه استاندارد موبایل شده است.
گوشی های این رده اکثرا دارای مرورگر اینترنت WAP 2.0 هستند . این مرورگر برای نمایش صفحات وب در صفحه نمایش کوچک طراحی شده است و تا حدی css 2.1 و برخی کدهای جاوا اسکریپت را هم پشتیبانی میکرد.
گوشی های SmartPhone گوشی هایی هستند که اکثرا سایز های بزرگتری دارند و امکانات بیشتری  از فیچر فون ها ارائه میدهند. همچنین این گوشی ها معمولا از سیستم عامل های پیشرفته تری استفاده میکنند. گوشی های مبتنی بر سیستم عامل Android، RIM ، winPhone و آیفون از این نوعند. این گوشی ها اکثرا سایزهای صفحه زیر را با خود دارند:
  • ۳۲۰×۴۸۰ معروف به HVGA که اکثرا توسط htc و سامسونگ و اپل (آیفون) بکار گرفته شده.
  • ۳۶۰×۶۴۰ معروف به nHD که اکثرا متعلق به گوشی های جدید نوکیا است.
  • ۴۸۰×۸۰۰ معروف به WVGA که اکثر گوشی های ویندوز ۷ و برخی اندرویدی ها این سایزی هستند.
  • سایزهای بزرگتر معمولا صفحات وب را مانند یک لپتاپ مرور میکنند و نیازی به نسخه ویژه موبایل ندارند.

شما میتوانید یک نسخه موبایل ساده برای کل موارد بالا تهیه کنید. اما اگر میخواهید کمی بیشتر سلیقه به خرج دهید میتوانید دو نسخه یکی برای سایز ۳۲۰×۲۴۰ و یکی برای ۳۲۰×۴۸۰ تهیه کنید و وظیفه نمایش صفحه برای سایزهای کوچکتر از ۳۲۰×۲۴۰ را به دوش نسخه ۳۲۰×۲۴۰ بیندازید و سایزهای بزرگتر را کلا بر عهده نسخه موبایل سایز ۳۲۰×۴۸۰ بگذارید.

توجه داشته باشید که باید در هر دو حالت ، صفحه را با قابلیت Fit شدن با سایز صفحه ( استفاده از درصد در اندازه ها بجای پیکسل) پیاده سازی نمایید تا سایزهای احتمالی غیر از سایزهای معرفی شده نیز پوشش داده شوند.

نسخه CSS جداگانه برای سایز های کوچکتر از ۴۸۰ پیکسل:
کمپانی اپل پیشنهاد میکند که  در صورتی که میخواهید CSS خاصی را برای صفحات موبایل تعریف و استفاده کنید از این کد کمک بگیرید:
<link media=”only screen and (max-device-width: 480px)” href=”iPhone.css” type=”text/css” rel=”stylesheet” />
در کد بالا شما تعریف میکنید که اگر سایز صفحه حداکثر ۴۸۰ پیکسل بود ، از فایل iphone.css برای شکل دادن به صفحه استفاده شود. برای سایزهای بزرگتر این کد کار نمی کند و CSS دیگری که تعریف کرده اید کار خواهد کرد.
مطالب بیشتر در طراحی وب
  1. حسین
    تیر ۲۵ ۱۳۹۰

    واقعا درست نیست که یکسری برن بعد از چند روز تحقیق یک مقاله بنویسن و شما خیلی راحت با عمل کپی پست، اونو بذاری تو سایت خودت و در نهایت ، حتی دلت نیاد یه لینک به سایت منبع بدی که مبادا کاربر روش کلیک کنه و از سایت شما خارج شه …

    پاسخ دادن
    • مدیر سایت
      تیر ۲۷ ۱۳۹۰

      میبخشی دوست عزیز اگه ناراحتیتون فقط به خاطر اینه که من فقط منبع رو ذکر کردم و بهش لینک ندادم همین جا عذر خواهی میکنم.
      اینم لینک, موفق باشید

      پاسخ دادن

ارسال نظر

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

اشترک در نظر