نمایش صفحات وب در تلفن های همراه؟

[nasinas]

درود به دوستان
میخوام بدونم چطور باید صفحه وب رو طراحی کنم که هم تو سیستم درست نمایش داده بشه و هم تو تلفن های همراه.
منظورم اندازه صفحات نمایش هستش.چون تلفن همراه خیلی کوچیکه ولی سیستم ها مونیتورشون خیلی بزرگتر. بنابراین نمیشه که یک صفحه وب هم تو سیستم و هم تو تلفن همراه درست نمایش داده بشه.
چه راه حلی دارین؟
ممنون میشم کمکم کنید.
با سپاس

[Saber Mogaddas]

سلام
دوست من تو گوشی های جدید که نیازی به اینکار نیست چون در اندازه خودش نشون می ده و تو موبایب های قدیمی هم کل صفحه رو نشون می ده ولی به صورت zoom می تونی اینور اونورش کنیی...!!
موفق باشی..

[ravand]

معمولا براي مبايل ميان يه نسخه ي جداگانه ميسازن با عنوان نسخه ي مبايل سايت . مثلا نسخه ي مبايل وبلاگ منو ببين:

http://barnamenevisi.blogsky.com/m

[nasinas]

معمولا براي مبايل ميان يه نسخه ي جداگانه ميسازن با عنوان نسخه ي مبايل سايت . مثلا نسخه ي مبايل وبلاگ منو ببين:

http://barnamenevisi.blogsky.com/m

ممنون. ولی میشه بگید اینو چطوری باید درست کنم؟ یعنی میتونم بجز لینک از تولبارهای دیگه هم استفاده کنم؟ مثلا دکمه و تکست باکس و این چیزا؟

[ravand]

والله من هنوز نساختم ولي اينطوري كه شنديم يه اندازه ي صفحه مبايلي رو در نظر ميگيرن و همينطوري يه قالبي براش ميسازن. شما يه نگاهي به قالب نسخه ي مبايل وبلاگ من بنداز ، دستت مياد يا خاصي با مبايلت به اينترنت وصل شو و وارد نسخه ي مبايل اين وبلاگ شو. ببين چجوريه.

[nasinas]

والله من هنوز نساختم ولي اينطوري كه شنديم يه اندازه ي صفحه مبايلي رو در نظر ميگيرن و همينطوري يه قالبي براش ميسازن. شما يه نگاهي به قالب نسخه ي مبايل وبلاگ من بنداز ، دستت مياد يا خاصي با مبايلت به اينترنت وصل شو و وارد نسخه ي مبايل اين وبلاگ شو. ببين چجوريه.

آره واردش شدم با گوشی
منتها نمیدونم چطوری تشخیص بدم که اینی که داره سایت رو باز میکنه ، گوشی همراهه یا کامپیوتر که بشه تغییر مسیرش داد.

[ravand]

ببين اگه بخواي قالب سايتت رو كارش بكني كه وقتي با نسخه ي مبايل برخورد ميكنه كوچك بشه خودت حسابش رو بكن اگه اين سايت كوچك بشه چي ميشه؟ خيلي ضايع ميشه. معمولا هر سايتي اگه نسخه ي مبايل داشته باشه . ادرس نسخه ي مبايلش به اين شكل هست كه آخر آدرس بعد از اسلش يه m هست.
الان آدرس سايت گوگل هم همينطوره http://www.google.com/m
بيشتر سايت ها و وبلاگ ها هم يه لينك توش هست با عنوان نسخه ي مبايل.

[nasinas]

ببين اگه بخواي قالب سايتت رو كارش بكني كه وقتي با نسخه ي مبايل برخورد ميكنه كوچك بشه خودت حسابش رو بكن اگه اين سايت كوچك بشه چي ميشه؟ خيلي ضايع ميشه. معمولا هر سايتي اگه نسخه ي مبايل داشته باشه . ادرس نسخه ي مبايلش به اين شكل هست كه آخر آدرس بعد از اسلش يه m هست.
الان آدرس سايت گوگل هم همينطوره http://www.google.com/m
بيشتر سايت ها و وبلاگ ها هم يه لينك توش هست با عنوان نسخه ي مبايل.

آره درسته.
ولی من میخوام سایتی که دارم طراحی میکنم به قول خودت یه نسخه موبایل هم براش درست کنم.
در دو آدرس متفاوت. یکی برای موبایل و یکی هم برای کامپیوتر.
منتها وقتی با گوشی آدرس اصلی سایت رو میزنن باید تشخیص داده بشه که این گوشیه یا کامپیوتر.
اگه گوشیه که به آدرس مخصوص موبایل بره و اگرم کامپیوتر بود که هیچی همون نسخه کامپیوتر باشه.
راهی هست برای تشخیص؟

[ravand]

اگه راهي هم باشه راهش استفاده از زبان تحت سرور مثل php هست . مثلا يه شرط براش بذاري كه اگه با يه مبايل روبرو بشه به صفحه ي نسخه ي مبايل هدايت بشه. برام اين موضوع جالب شد. پيگيري ميكنم اگه به جوابش رسيدم خبرت ميكنم شما هم اگه نتيجه اي پيدا كردي ما رو بي خبر نذار.
متشكرم.

[nasinas]

اگه راهي هم باشه راهش استفاده از زبان تحت سرور مثل php هست . مثلا يه شرط براش بذاري كه اگه با يه مبايل روبرو بشه به صفحه ي نسخه ي مبايل هدايت بشه. برام اين موضوع جالب شد. پيگيري ميكنم اگه به جوابش رسيدم خبرت ميكنم شما هم اگه نتيجه اي پيدا كردي ما رو بي خبر نذار.
متشكرم.

باید با جاوا اسکریپت تابعی وجود داشته باشه که نوع مرورگر رو مشخص کنه.
البته نمیدونم که نوع مرورگرها در سیستم عامل های مدرن امروزی گوشی های موبایل مثل اندروید و اینا چیه.
پیدا کردم حتما خبرت میکنم.

این یه لینکه در مورد این تابعه
http://www.developerstudio.ir/JavaScript/Navigator.aspx

[betisa]

با سلام
برای این که بتونیم تشخیص بدیم که مرورگر نسخه موبایل است یا نه می تونید به این سایت (http://detectmobilebrowsers.com/) مراجعه کنید نمونه کد های رایگانی برای این کار قرار داده.

و برای طراحی نسخه موبایل سایت میتونی از جیکوری موبایل کمک بگیری که در این سایت (http://jquerymobile.com/) موجوده و اطلاعات خوبی رو در مورد طراحی سایت برای موبایل در اختیار قرار میده.

[ravand]

ببخشيد اين كدي كه براي جي كوئري هست همين سه خط هست؟ يعني منظورم اينه كه بايد به اين شكل باشه؟

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

[nasinas]

ببخشيد اين كدي كه براي جي كوئري هست همين سه خط هست؟ يعني منظورم اينه كه بايد به اين شكل باشه؟

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

اولی که استایله(CSS) و دومی و سومی هم معرفی کتابخانه ی jquery جهت استفاده از توابع اوناست.
این سه خط شما فقط معرفیه و داخل کد باید از اونا استفاده کرد.

[ravand]

خوب آدرسي كه بايد بعد از مشخص شدن مبايل بازديد كننده به اون آدرس بره كجا بايد نوشت. در واقع اون آدرس مبايل رو باد كجا وارد كنيم؟ بعد از يه عمري كدنويسي من ميدونم اين css هست . :لبخند:

[nasinas]

خوب آدرسي كه بايد بعد از مشخص شدن مبايل بازديد كننده به اون آدرس بره كجا بايد نوشت. در واقع اون آدرس مبايل رو باد كجا وارد كنيم؟ بعد از يه عمري كدنويسي من ميدونم اين css هست . :لبخند:

:)))) نه جسارت نشده باشه

منم الان تو کشف این داستانم.
من الان این کد سی شارپ رو برداشتم اگه به کدش نیگاه کنی آخر کد نوشته به چه آدرسی بره ببین :
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Text.RegularExpressions" %>
<%
string u = Request.ServerVariables["HTTP_USER_AGENT"];
Regex b = new Regex(@"android.+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iem obile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|symbian|treo|up\\.(browser|lin k)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
Regex v = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar (ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|b umb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a |jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|e\\-|e\\/|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|d o|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran |owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk( 40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98 )|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\\-|2|g)|yas\\-|your|zeto|zte\\-", RegexOptions.IgnoreCase | RegexOptions.Multiline);
if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4)))) {
Response.Redirect("http://detectmobilebrowser.com/mobile");
}
%>

[nasinas]

این کد تست شد.
من یه صفحه ASP.NET درست کردم و این کد رو در اول صفحه قرار دادم و آدرس گوگل رو اگه موبایل بود دادم. و عمل کرد.
بتیسا دستت درد نکنه.
ravand امتحانشون کن

[ravand]

دوستان عزيز
من بحثم سر جي كوئري بود. من گفتم با جي كوئري چطوري مي تونيم اين كار رو بكنيم؟
من خودم با php اين كار رو كردم و عمل كرد. من نيازي به سي شارپ asp ندارم و اصلا باهاش كار نكردم اگه بخوام با برنامه هاي تحت سرور اين كار رو بكنم با php ميكنم. سوال من در مورد يه برنامه ي تحت كلاينت مثل جي كوئري بود.:لبخند:

[سوداگر]

درود به دوستان
میخوام بدونم چطور باید صفحه وب رو طراحی کنم که هم تو سیستم درست نمایش داده بشه و هم تو تلفن های همراه.
منظورم اندازه صفحات نمایش هستش.چون تلفن همراه خیلی کوچیکه ولی سیستم ها مونیتورشون خیلی بزرگتر. بنابراین نمیشه که یک صفحه وب هم تو سیستم و هم تو تلفن همراه درست نمایش داده بشه.
چه راه حلی دارین؟
ممنون میشم کمکم کنید.
با سپاس

در کتاب Programming the Mobile Web می خوانیم:
Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile
Website

این رو هم بخونی بد نیست! (http://docstore.mik.ua/orelly/web2/wdesign/ch32_01.htm)

[nasinas]

در کتاب Programming the Mobile Web می خوانیم:
Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile
Website

این رو هم بخونی بد نیست! (http://docstore.mik.ua/orelly/web2/wdesign/ch32_01.htm)

درسته.مشکل حل شد.بیشتر سر این مشکل داشتم که چطور تشخیص بده که موبایل این آدرس رو باز کرده یا کامپیوتر.
برای موبایلم درسته. اصلا ما میتونیم width رو به صورت درصدی هم بدیم که به اندازه نمایشگر موبایل بشه.

[nasinas]

دوستان عزيز
من بحثم سر جي كوئري بود. من گفتم با جي كوئري چطوري مي تونيم اين كار رو بكنيم؟
من خودم با php اين كار رو كردم و عمل كرد. من نيازي به سي شارپ asp ندارم و اصلا باهاش كار نكردم اگه بخوام با برنامه هاي تحت سرور اين كار رو بكنم با php ميكنم. سوال من در مورد يه برنامه ي تحت كلاينت مثل جي كوئري بود.:لبخند:

/**
* jQuery.browser.mobile (http://detectmobilebrowser.com/)
*
* jQuery.browser.mobile will be true if the browser is a mobile device
*
**/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iem obile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link )|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar (ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|b umb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a |jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|d o|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran |owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(4 0|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98 )|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navig ator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

میتونی کدهای بالا رو داخل یه تابع بذاری و داخل رویداد onload تگ body اونو فراخوانی کنی. آدرس رو هم تو قسمت آخر جایگزین کنی.