خانه وبلاگ طراحی آموزش انتخاب بهترین سایز برای طراحی قالب نسخه موبایل سایت

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

وبلاگ - طراحی

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

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

Feature Phones
Smart Phones

 

گوشي هاي feature phone دسته گوشي هايي هستند که امکانات محدودي براي استفاده از اينترنت دارند و اکثرا از ساير صفحه 320x240 (و گاهي کوچکتر از اين) استفاده ميکنند. اکثر گوشيهايي که در سالهاي قبل فروخته شده اند، زيرمجموعه اين رده هستند. بطور مثال :

سري K و C و W سوني اريکسون (320x240 معروف به QVGA)
سري N نوکيا اکثرا  (320x240) البته سري هاي قديمي تر نوکيا مانند 6600 اکثرا (176x208)بودند.
وضعيت سايرين هم اکثرا (320x240) است و اين سايز به نوعي تبديل به کوچک ترين صفحه استاندارد موبايل شده است.

 

گوشي هاي اين رده اکثرا داراي مرورگر اينترنت WAP 2.0 هستند . اين مرورگر براي نمايش صفحات وب در صفحه نمايش کوچک طراحي شده است و تا حدي css 2.1 و برخي کدهاي جاوا اسکريپت را هم پشتيباني ميکرد.

 

گوشي هاي SmartPhone گوشي هايي هستند که اکثرا سايز هاي بزرگتري دارند و امکانات بيشتري  از فيچر فون ها ارائه ميدهند. همچنين اين گوشي ها معمولا از سيستم عامل هاي پيشرفته تري استفاده ميکنند. گوشي هاي مبتني بر سيستم عامل Android، RIM ، winPhone و آيفون از اين نوعند. اين گوشي ها اکثرا سايزهاي صفحه زير را با خود دارند:

320x480 معروف به HVGA که اکثرا توسط htc و سامسونگ و اپل (آيفون) بکار گرفته شده.
360x640 معروف به nHD که اکثرا متعلق به گوشي هاي جديد نوکيا است.
480x800 معروف به WVGA که اکثر گوشي هاي ويندوز 7 و برخي اندرويدي ها اين سايزي هستند.
سايزهاي بزرگتر معمولا صفحات وب را مانند يک لپ تاپ مرور مي کنند و نيازي به نسخه ويژه موبايل ندارند.

 

انواع صفحه نمایش سایز قالب برای موبایل

 

شما ميتوانيد يک نسخه موبايل ساده براي کل موارد بالا تهيه کنيد. اما اگر ميخواهيد کمي بيشتر سليقه به خرج دهيد ميتوانيد دو نسخه يکي براي سايز 320x240 و يکي براي 320x480 تهيه کنيد و وظيفه نمايش صفحه براي سايزهاي کوچکتر از 320x240 را به دوش نسخه 320x240 بيندازيد و سايزهاي بزرگتر را کلا بر عهده نسخه موبايل سايز 320x480 بگذاريد.

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

نسخه CSS جداگانه براي سايز هاي کوچکتر از 480 پيکسل:

کمپاني اپل پيشنهاد ميکند که  در صورتي که ميخواهيد CSS خاصي را براي صفحات موبايل تعريف و استفاده کنيد از اين کد کمک بگيريد:


<link media=”only screen and (max-device-width: 480px)” href=”iPhone.css” type=”text/css” rel=”stylesheet” />



در کد بالا شما تعريف ميکنيد که اگر سايز صفحه حداکثر 480 پيکسل بود ، از فايل iphone.css براي شکل دادن به صفحه استفاده شود. براي سايزهاي بزرگتر اين کد کار نمي کند و CSS ديگري که تعريف کرده ايد کار خواهد کرد.

 

نظرات 

 
+2 #1 دارکوب 1392-07-18 10:00
باتشکر از درج مطالب مفیدتون.
 
 
+1 #2 سعید555 1392-08-16 21:46
سلام خیلی ممنون از اموزشتون میشه لطفا اندازه استاندار برای تبلت هم بگید یعنی همون حد اکثر اندازه صفحه تبلت چون بعضی از سایتا مثل یاهو برای هرکدوم قالب جداگانه دلرن باتشکر
 
 
+7 #3 مـرادی 1392-08-18 18:42
سلام

بهترین انتخاب های 480x800 یا عرض 768 می باشد
البته تبلت ها در اندازه های مختلفی می باشد ولی اکثر از این سایز ها پشتیبانی می کنند.

موفق باشید.
 

به علت ارسال اسپم های فراوان، قسمت نظرات سایت در حال حاضر غیرفعال می باشد.
به این دلیل از شما کاربران گرامی عذرخواهی می کنیم.

ایمن شده بوسیله وب سایت تک وب دیزاین تک وب دیزاین