დასაშვებია ადაპტაციური დიზაინი. ტელეფონის ცალკე ეკრანი: როგორ ავირჩიოთ

ტექნიკურ ჟურნალისტებს აღარ სურთ იყვირონ პოსტ-კომპიუტერის ეპოქაზე; ტრადიციული ფორმის ფაქტორების კომპიუტერების გაყიდვები შეუფერხებლად ეცემა, ისევე როგორც მათი მწარმოებლების აქციები. შემდეგ მობილური მოწყობილობების, სმარტფონებისა და ტაბლეტების რაოდენობა სტაბილურად იზრდება.

დიზაინერისთვის ეს ნიშნავს, რომ წინასწარ, ვისაც სურს ტექნიკურ მახასიათებლებში ისაუბროს მობილურ მოწყობილობებზე, ისინი პასუხისმგებელნი არიან განლაგების დიზაინზე ისე, რომ საიტის გამოყენება შესაძლებელი იყოს ტელეფონიდან (და, სამწუხაროდ, ტაბლეტიდან). ეს არ ნიშნავს მხოლოდ მათ, ვისაც აქვს ღილაკები, რომელთა დაჭერა შესაძლებელია თითით. იდეალურ შემთხვევაში, რა თქმა უნდა, საიტს აქვს გარკვეული ოკრემა მობილური ვერსიამაგრამ, როგორც ჩვენი მტკიცებულებები გვიჩვენებს, კლიენტების უმეტესობას არ სურს მასზე დამატებითი ფულის დანახვა, მაგრამ მაშინვე ჩივიან, რომ ისინი არაფერს იღებენ თავიანთი საყვარელი ვაშლის მოწყობილობიდან.

სირცხვილია, რომ დიზაინერებს, რომლებსაც ვიცნობ, ჩავარდნენ, უპირველეს ყოვლისა, აქვთ პრობლემები მათ მიერ დახატულ განლაგებასთან დაკავშირებით - ზუსტი ინფორმაციის ნაკლებობა იმის შესახებ, თუ რამდენი პიქსელი ეტევა ეკრანზე ნომინალური ცალკეული შენობიდან. დესკტოპის 20' მონიტორის. კარგი, არაფერია საშინელი, აქ და იქ არის დიდი რაოდენობით მარკეტინგი. ეს სტატია დაგეხმარებათ გაიგოთ შექმნილი სიტუაცია.

რაც შეეხება მოწყობილობებს Android-სა და iOS-ზე, WP მაინც ეგზოტიკურია და განსაკუთრებული ბოროტად გამოყენების მტკიცებულების გარეშე ვერ გავბედავ რეკომენდაციების გაცემას.

იაკშჩოში HTML დოკუმენტებიარის მეტა ტეგები, რომლებიც მობილურ ბრაუზერს ეუბნებიან, რა სიგანეში უნდა იყოს ნაჩვენები დოკუმენტი, შემდეგ ბრაუზერები იქცევიან ისე, თითქოს დოკუმენტის სიგანე 980 პიქსელია. ეს ეხება როგორც ტელეფონებს, რომელთა ეკრანის სიგანეა 320 პიქსელი, ასევე 10 დიუმიანი ტაბლეტებისთვის, რომლებიც იყენებენ Android-ს, iOS-ს და ბრაუზერს Webkit-ზე. ეს მიდგომა ნიშნავს, რომ საიტები, რომელთა მინიმალური სიგანეა 960 პიქსელი, ინარჩუნებენ მცირე მინდვრებს, რათა უფრო ადვილად დაიჯესტს შინაარსი.

რამდენადაც დოკუმენტის მინიმალური სიგანე უფრო დიდია, ბრაუზერების ქცევა იწყებს ცვლილებას. Safari iPhone/iPad-ზე უბრალოდ შეკუმშავს შინაარსს. Android-ში დაადგინეთ DIP - სიმკვრივისგან დამოუკიდებელი პიქსელები, ამის შესახებ მოგვიანებით. თუ დოკუმენტის სიგანე 980-ზე მეტია ან მეტია, ქვედა სიგანე მორგებულია DIP-ზე, ხდება მარჯვენა ხელით გადახვევა. ამრიგად, საიტი, რომლის სიგანეა 1040 პიქსელი, გამოჩნდება ჰორიზონტალური გადახვევის გარეშე iPhone-სა და iPad-ზე (1024 პიქსელი), ასევე ტელეფონებზე გადახვევის გარეშე Galaxy S3-ზე (ფიზიკურად ცალკე ზომა 1280x720) ან ტაბლეტზე і Nexus 7 (ფიზიკური განცალკევება). 8)

როგორ აკეთებ ბეჯს? მიუხედავად დესკტოპის კომპიუტერებსა და ლეპტოპებში ფართოეკრანიანი დისპლეების დიდი რაოდენობისა, ძველმა კარგმა 960 პიქსელიანმა ქსელმა არ დაკარგა აქტუალობა. მობილური ბრაუზერებს შეიძლება ჰქონდეთ იგივე ძალა ტექსტური ბლოკების ადაპტირებისთვის ისეთ ფორმატზე, რომელიც ადვილად იკითხება მოწყობილობაზე, მაგალითად, ტელეფონზე მცირე ტექსტიდან ტექსტის აკრეფა და მისი შრიფტის გადიდება. თქვენ ვერ ნახავთ მას, რადგან ტექსტი უნდა განთავსდეს ბლოკზე, მკაცრად გამოსახული სიმაღლეში. სინამდვილეში, ადვილი არ იყო სიმაღლით შეზღუდული საიტთან მუშაობა, განსაკუთრებით იმ შემთხვევაში, თუ დაგეგმილია მისი წვდომა მობილური მოწყობილობებიდან. მობილური მოწყობილობების, განსაკუთრებით ტელეფონების კიდევ ერთი მტერია პოზიციის მქონე ელემენტები: ფიქსირებული. მაგალითად, ეს ღილაკი მოდურია მათთვის, ვინც ძალისხმევის გარეშე გარბის მყიდველის გვერდით. კიდევ უფრო სქელია მსხვილი ნაკვთები, ძირზე ფიქსირებული თავსახურით. ასეთი ელემენტები იკავებენ არა მხოლოდ დიდ ადგილს პატარა ეკრანზე, არამედ კარგავენ დიდ ადგილს დიდ ეკრანზე. პრობლემა ასევე დამახასიათებელია მოდალური ფანჯრები. ვინაიდან ისინი ეკრანის შუაშია ნაჩვენები, მათ ნაცვლად მობილური ტელეფონის გამოყენება მოითხოვს გარკვეულ კონფიდენციალურობას. Vikoristanny popups on kshtalt „იყავით ჩვენთან შეხება სოციალური ზომები!“, ასე რომ მოიქცეთ - სასტიკი არ მოსწონს მობილური მოწყობილობების გამოყენება, ამიტომ ხშირად უფრო ადვილია საიტის დატოვება მთელი ამომხტარის დახურვის გარეშე.

მოდით შევხედოთ რამდენიმე საიტს.

იმისდა მიუხედავად, რომ Lenta.ru-ს აქვს ნორმალური მობილური ვერსია, მასზე ავტომატური გადართვა არ მუშაობს. დესკტოპის ფიქსირებული მენიუებისთვის შეგიძლიათ ტექსტზე ასვლა ავტომატური მასშტაბით. მხატვარი არჩევანის წინაშე დგას, ან ხელით გაასწოროს, ან არ შეეცადოს დაწერა მ. url-ში.

RBC. მათ უკვე აქვთ მობილური ვერსია, მაგრამ მასზე გადასვლა მხოლოდ დასჭირდება სათაური გვერდი. პირდაპირი შეტყობინებებისთვის (Google News-დან, zokrema) შეგიძლიათ ყურადღება მიაქციოთ ამ წაუკითხავ ტილოს. რა ღირს ასეთ საიტზე რეკლამა? ლედვე.

სუპერ კანონიკური ამომხტარი ფანჯარა, რომელიც გადავიდა RBC სტილში. ყველაზე მნიშვნელოვანი ის არის, რომ თქვენ არ გჭირდებათ მორცხვი.

ინტან, რა საეტაპო, გამოიცანით ვინ. სასწაულად მივხვდი, რატომ არ შემეძლო ამის გაკეთება მენიუთი, რომ წინააღმდეგობის გაწევის ხასიათზე არ ვყოფილიყავი. საკვების დადება თემას არ ეხება.

კიდევ ერთი რამ, რაც ნამდვილად არ კარგავს დროს დესკტოპის ხედზე, მაგრამ იწვევს პრობლემებს მობილურზე, არის მორგებული ფორმის ელემენტები. ვინც ვერ მოიშორებს სურნელს CSS მეთოდებით, აღმოჩნდა არა მხოლოდ, რომ მსოფლიო ქსელის კონსორციუმი იყო ზარმაცი.

მაგალითად, თქვენ დაწერეთ იმ ნივთების სია, რომლებიც ცდება. მაგალითად, დესკტოპის ბრაუზერში, ის ყველაფრის მსგავსია, იხსნება მაუსის დაწკაპუნებით და გადახვევა მაუსით. ალე შიგნით მობილური რობოტიასეთ ელემენტებთან თქვენ გაქვთ დიდი პრობლემები. თითქოს არჩევა სტანდარტული იყო, მათ აჩვენეს სისტემის ფანჯარა ბარაბანი/ჩასაშლელი სიით, OS-ის მიხედვით.

და iOS-ზე ფაილის მიმაგრების შესაძლებლობა იგივეა. და რადგან ღილაკის სტანდარტული ხედი უკეთესია, როდესაც ის ჩართულია, მაშინ დაწკაპუნების ღილაკი მართლაც ლამაზია, რადგან ის არ მუშაობს თქვენს საიტზე.

რა თქმა უნდა, იდეალურ შემთხვევაში, მობილურ მოწყობილობას აქვს მნიშვნელობები, ხოლო მობილური მოწყობილობებისთვის, სკრიპტები, რომლებიც განკუთვნილია სტანდარტული ინტერფეისის შესაცვლელად, არ საჭიროებს შეცვლას.

მობილური ბრაუზერების კიდევ ერთი უსიამოვნო მახასიათებელია ის, რომ ამ დროს ისინი არ ახდენენ ქეშირებულ შრიფტებს, რომლებიც დაკავშირებულია. Google Web Fonts-თან დაკავშირებული ყველა კონტურისთვის იგივე PT Sans გაგრძელდება ძალიან დიდი ხნის განმავლობაში. ამ შემთხვევაში, ნაკლებად სავარაუდოა, რომ ეს უკვე აშკარად გამოვა Helvetica/Roboto-ს შემდეგ. ორჯერ დაფიქრდით იმაზე, თუ რამდენად აღფრთოვანებული ხართ თქვენი პირადი შრიფტით დაინტერესებით.

გაზომეთ და გამოყავით მობილური მოწყობილობების ეკრანები. განსხვავება ეკრანის ფიზიკურ ნაწილსა და მობილური ბრაუზერის ნაწილს შორის

iPhone-სა და iPad-ს აქვს წერტილების კონცეფცია - ვაშლის წერტილები. განახლდა iPhone მოდელზე 5 – 320 480 პიქსელზე. რა არის ბადურის ჩვენება? ბადურის დისპლეი ზრდის პიქსელის სიმკვრივეს, ისე რომ 4 ფიზიკური პიქსელი ერთ წერტილზე დაეცემა. ასე რომ, iPhone 4, ფიზიკური ეკრანის გარჩევადობით 640 x 960 პიქსელით, კვლავ არის 320 x 480 პიქსელი. უფრო მეტიც, გრაფიკა უფრო დეტალურია დანართებში ორი დიდი სურათის ჩანაცვლების მიზნით. iPhone 5-ისთვის პიქსელის მნიშვნელობები გაიზარდა 480-დან 568-მდე. ყველა ვერსიის iPad-ისთვის, Mini-ის ჩათვლით, ის ყოველთვის არის 1024x768.

1-დან 1-მდე მასშტაბით, სტანდარტული გრაფიკა ვებზე (მაგალითად, ფონის სურათი) გამოჩნდება ბევრად უფრო დიდ ხედში, ფიზიკურ ეკრანზე ერთი პიქსელი დაიჭიმება 4 პიქსელით. რასტრული გამოსახულება. როგორ განვსაზღვროთ ასეთი სიტუაციის მაღალი ხარისხის გრაფიკა, განვიხილავთ შემდეგ განყოფილებას. გოლოვნა, რატომ გჭირდებათ ნებართვის გახსენება iOS მოწყობილობები- თქვენ არ გჭირდებათ იფიქროთ, რომ გვერდები ბადურასა და არაბადურაზე განსხვავდება სიგანეში. არა, განსხვავება მხოლოდ პიქსელების სიმკვრივეშია, იგივე პროპორციები.

Android-ში სიტუაცია უხვად რთული, ზუსტი და მრავალფეროვანია. Android-ში, ეკრანის სხვადასხვა სიმკვრივის (DPI) კონცეფცია განხილულია Wikory-ში. ამის არსი იმაში მდგომარეობს, რომ დისპლეის სხვადასხვა ფიზიკური განზომილებებისა და ცალკეული შენობების შემთხვევაში, ქცევის მოდელი ქულების მიხედვით განსხვავდება მოწყობილობის დანიშნულების მიხედვით. DIP არის Points-ის ანალოგი.

ეკრანის სისქე - 1. ამ კატეგორიაში შედის ყველა მოწყობილობა, როგორიცაა ტელეფონები 320x480 (HTC Hero, LG Optimus One), 7 დიუმიანი ტაბლეტები 1024x600 ( სამსუნგ გალაქსი Tab, Kindle Fire), 10 დიუმიანი ტაბლეტები ( Asus Transformer Acer A500, Galaxy Tab 10’1).

ეკრანის სისქე 1.33 გამოიყენება 7 დიუმიან ტაბლეტებში Nexus 7 ეკრანზე. ფიზიკური ზომა - 1280x800, DIP - 960x600.

ეკრანის სისქე 1.5 - მობილური ტელეფონებიმაღალი ფასის კატეგორია 2011 და 2012 წლის შუა რიცხვები, 10 დიუმიანი ტაბლეტები FullHD-ით. მაგალითად, Nexus One 480x800 პიქსელი, 360x533 * DIP, HTC One S - 540x960 პიქსელი, 360x640 DIP და Asus Transformer Pad Infinity 1920x1200 პიქსელი, 1280x800.

*Android Developers-ზე ის აჩვენებს 534-ს, მაგრამ ბრაუზერის სიგანის არჩევა JS-ის საშუალებით აჩვენებს 533-ს, ცხადია, მედია ჩანაწერებში თქვენ უნდა ფოკუსირდეთ ამ რიცხვზე.

ეკრანის სისქე 2 – ტელეფონები 2012 წლის მაღალი ფასის კატეგორიაში და ფაქტიურად რამდენიმე ტაბლეტი. მაგალითად, HTC One X, Samsung Galaxy S3 - ცალკე ეკრანის ზომა 1280x720, ზომები DIP 360x640. Google Nexus 10 ტაბლეტი – ცალკე ზომა 2560x1600 პიქსელი, 1280x800 DIP.

ეკრანის სისქე 3 – 2013 წლის ფლაგმანი FullHD ეკრანით. 1920x1080 პიქსელის ცალკეული პარამეტრებით, მათ აქვთ იგივე 360x640 DIP.

ამავე დროს, ის ასევე აჯობა Google Nexus 4-ს 1280x768 პიქსელიანი ეკრანით 2 (384x640) სიმკვრივიდან. ეკრანის ღილაკების მქონე მოდელებში, 42DIP იკავებს მათ პანელს, როგორც ამ ტიპის მოდელებში (Galaxy Nexus, Nexus 4, სონი იქსპერიაზ) პორტრეტის რეჟიმში გამოსახულების განცალკევება გაცილებით მცირე იქნება და გახდება 598 პიქსელი.

ამრიგად, ჩვენ გვაქვს სამი რეზოლუცია პორტრეტებისთვის - 320, 460 და მინიმუმ 384, და თითქმის ნახევარი პეიზაჟებისთვის - 480, 533, 568, 640 (598 რბილი კლავიშებით).

ტაბლეტებს აქვთ პორტრეტები 600 და 800 და ლანდშაფტი 960, 1024 და 1280.

ქვემოთ მოყვანილი ცხრილი აჩვენებს პოპულარული პროდუქტების უფრო ტიპურ ნებართვებს:

როგორ გავუგზავნო რობოტს მობილური აპლიკაციის მაკეტი?

დასაწყებად, წაიკითხეთ ინსტრუქციები. სხვადასხვა პლატფორმაზე პროგრამები შეიძლება განსხვავებულად გამოიყურებოდეს. ღერძი, მაგალითად, დასრულების შემდეგ, შეგიძლიათ სხვადასხვა ოპერაციული სისტემის სტანდარტული ელემენტების გასწორება

iPhone პროგრამის განლაგებაზე სამუშაოდ შექმენით ტილო 640x1136 (960) და აირჩიეთ ზომები, რომლებიც მრავლდება ორი. ყველა გრაფიკა, ყველა შრიფტი ასეთია.

თქვენი ახალი პროგრამული უზრუნველყოფის ეკრანის მცირე ნაწილი შეიძლება დაიკავოს სტატუსის ზოლმა სიგნალის, ბატარეის და ა.შ. ეს არის 20 პიქსელი iOS-ში და 25 DIP Android-ში. IN Android ტელეფონებირბილი კლავიშებით და ტაბლეტებით, ეკრანის ქვედა ნაწილში 48 DIP უკავია მათ ქვეშ ფირფიტას (ნავიგაციის ზოლი). თუმცა, არაკანონიკურ მოწყობილობებში Samsung-ის ტაბლეტების ჩვენება ნავიგაციის ზოლისა და სტატუსის ზოლის მეშვეობით გამორთულია.

Android სატელეფონო პროგრამებისთვის მნიშვნელოვანია შეიძინოთ ჰოსტი არანაკლებ 720x1280. ეს უკეთესია, ვიდრე 1080x1960, მიმდინარე ფლაგმანზე.

720x1280 ტილოსთვის, ზომები არის ორის ჯერადი, 1080x1960-ისთვის, სამის ჯერადი. Vikoristovat როგორც ტილო 480x800 ან 640x960 ძალიან ცუდი იდეაა.

განლაგებაზე მუშაობისას საჭიროა პერიოდულად შეცვალოთ ფანჯრის ზომა. გრაფიკული რედაქტორიიგივე ზომით, როგორც რეალური მოწყობილობა, ასევე შეინახეთ JPG და ნახეთ თქვენს მოწყობილობაზე. შეგიძლიათ ღილაკზე თითით შეხება? რატომ არ გჭირდებათ მეტი ტექსტი?

Vikorist-ის განლაგება არაჩვეულებრივი განზომილებისაა, პროგრამების მრუდე გარეგნობის ან ცუდი გრაფიკის ბრალი მთლიანად თქვენი იქნება.

გთხოვთ, პატივი სცეთ დეტალებს და გახსოვდეთ - პიქსელები და წერტილები/დიპი აღარ არის იგივე.

ვებ გრაფიკის ოპტიმიზაცია მაღალი სიმკვრივის ეკრანებისთვის

აბა, ჩვენ გავიგეთ მათ შესახებ, ვინც ყლორტებია შესაძლო ვარიანტებიპიქსელების სიმკვრივე ეკრანზე. ცხადია, იმისათვის, რომ თავიდან ავიცილოთ გაფუჭებული გრაფიკის ეფექტი, რომელიც ცნობილია როგორც „Playstation ეფექტი“, ჩვენ უნდა გამოვიყენოთ ან უფრო დიდი ჯიშის რასტრული გრაფიკა, ან ვექტორული გრაფიკა, მაგალითად, SVG.

ამ შემთხვევაში, SVG მხარდაჭერა კვლავ შემოსაზღვრულია და ძველი ბრაუზერების მოხერხებულობისთვის, თქვენ კვლავ მოგიწევთ რასტერის შეცვლა. კიდევ ერთი თავის ტკივილი იქნება სპრაიტების შერჩევა - ფონის პოზიციის მნიშვნელობები უნდა იყოს მითითებული სურათებში, რომლებიც საჭიროებენ დიდ მათემატიკურ გამოთვლებს. უმარტივესი გზაა თავად აირჩიოთ რამდენიმე ვარიანტი ამ სურათებისთვის, მედია მოთხოვნის საშუალებით, მაგალითად -webkit-min-device-pixel-ratio: 2.

როგორც შენიშნავთ, თავად ტექნიკა საკმაოდ მარტივია და ხაზს უსვამს ერთი და იმავე სურათის რამდენიმე ვერსიის ხილვადობას, როგორიცაა ფონის გამოსახულების სახით გამოყენებული. საჭიროების შემთხვევაში, ორიგინალური სურათების მასშტაბირება შეიძლება იყოს ზომაზე დიდი და გვერდზე საჭირო ზომა შეიძლება განისაზღვროს სტილის ატრიბუტის საშუალებით.

უკანა მხარე შეიცავს, რაც მთავარია, მაღალი ხარისხის სურათების დიდ რაოდენობას. აქ თქვენ უნდა გადაწყვიტოთ რა არის უფრო მნიშვნელოვანი - კონტენტი, რომელიც უნდა შექმნათ უფრო დიდი დროის განმავლობაში, თუ დიზაინი.

მივესალმები თქვენ, ერთგულ მიმდევრებს და ბლოგის საიტის რეგულარულ მკითხველებს!

ახლახან განვაახლე ჩემი ბლოგი, შევქმენი WordPress-ის თემა ნულიდან. მე დავწერე იმ ამბების შესახებ, რაც მოხდა, როდესაც დავწერე სტატისტიკა. ” ახალი შაბლონის შექმნისას ერთ-ერთი მთავარი ამოცანაა საიტის ადაპტური განლაგება ეკრანის ყველა შეზღუდვის ქვეშ.

სტატისტიკის მოკლე მონახაზი:

წინა სტატიაში მე უკვე დავწერე მათ შესახებ, რაც ყველაზე მეტად საჭიროა. როგორ მივაღწიოთ ამ ადაპტირებას?

ვისთვის? სხვადასხვა გზები. Htos vikoristuє javascript, htos sho schos sche. მაგრამ მე პატივს ვცემ, რომ ყველაზე მარტივი და სწორი გზა ადაპტაციური სისტემაა. მე დაგეხმარები CSS-ში.

როგორ განვავითაროთ ვებსაიტის ადაპტირებული განლაგება

პირველის მიხედვით როგორ დაიწყეთ თქვენი ვებსაიტის საპასუხო დიზაინის შექმნა, ტეგების ჩათვლით? ჩადეთ შეურაცხმყოფელი კოდი:

რა სულელი ვარ, დიდს არ დავხარჯავ, ვებსაიტის ადაპტაციური განლაგების გაკეთებას რომ ვცდილობ!
მობილური ბრაუზერების პრობლემა ის არის, რომ საიტის განლაგება მასშტაბურია, თუნდაც ადაპტაციურად.

გასაგებად რომ ვთქვათ, მე გამოვხატავ დიზაინს, შემდეგ ვწერ ყველა საჭირო სტილს და შეყვანას და ვამოწმებ საიტის ადაპტირებას სხვადასხვა ნებართვისთვის. Ყველაფერი კარგადაა! მაშინაც კი, თუ ჩემს ბლოგს ჩემს სმარტფონზე გავხსნი, ვხედავ, რომ საიტი უბრალოდ დატვირთულია. ისინი არ მოერგნენ მობილურ მოწყობილობას, უბრალოდ შეცვალეს შრიფტის ზომა, სურათები და ა.შ.

Როგორ თუ? კიდევ ერთხელ დავიწყე ყველა სტილის შემოწმება და თუ კლასები სწორად დავწერე, დავასრულე ბრაუზერის ფანჯრის სიგანე px-ში javascript-ის გამოყენებით. შოცთან ვარ. როდესაც ჩემს ლეპტოპს შევამოწმე, აღმოვაჩინე შედეგი 1024 პიქსელი და დაახლოებით იგივე შედეგი მივიღე, როდესაც გავხსენი საიტი ჩემს სმარტფონზე!

სამწუხაროდ, ჩვენ არ შეგვიძლია ამის გაკეთება!

ჩნდება იმის გამო, რომ მე არ შემიძლია ჩავწერო კოდი, რომელიც ჩავდე, მობილური ბრაუზერიარ მესმის, რომ საიტი ადაპტირებულიადა თქვენ შეგიძლიათ უბრალოდ შეცვალოთ საიტის გვერდი ისე, რომ ის მოთავსდეს თქვენი მობილური ტელეფონის პატარა ეკრანზე.

ბევრი დრო დავკარგე ჩემი სისულელისა და არაკომპეტენტურობის გამო. ნატომისტი ახლა დავიწყებულია წარსულისთვის))).

საპასუხო CSS მედია განლაგება

საპასუხო CSS-ის გამოსაყენებლად, თქვენ უნდა გამოიყენოთ მედია ცვლადი.

ცე იაკი? დიახ, ძალიან მარტივი. CSS ფაილებისთვის თქვენ უნდა დაწეროთ მოთხოვნები, როგორიცაა:

@media ეკრანი და (მინ-სიგანე: 1440 პიქსელი) და (მაქს. სიგანე: 1599 პიქსელი)( )

ეს კოდი ნიშნავს, რომ განლაგების სტილები „( )“-ს შორის იმუშავებს ეკრანებისთვის, რომელთა მინიმალური სიგანეა 1440 პიქსელი და მაქსიმალური სიგანე 1599 პიქსელი.

საიტის ელემენტების იგივე სტილები, რომლებიც ადაპტირებულია ცალკე ეკრანზე მორგებისთვის, უნდა იყოს მითითებული თითოეული შესაძლო ეკრანის სიგანეზე.

ეკრანის ყველაზე მნიშვნელოვანი ცალკეული ასპექტები, ადაპტური განლაგებით

• 320 პიქსელი- მობილური მოწყობილობები (პორტრეტის ორიენტაცია);
• 480 პიქსელი- მობილური მოწყობილობები (ლანდშაფტის ორიენტაცია);
• 600 პიქსელი- პატარა ტაბლეტები;
• 768 პიქსელი- ტაბლეტები (პორტრეტული ორიენტაცია);
• 1024 პიქსელი- ტაბლეტები (ლანდშაფტური ორიენტაცია)/ნეტბუქები;
• 1280 px და მეტი- კომპიუტერი.

ადაპტაციური განლაგების დროს დაშვებულია და აუცილებელია ხმამაღლა საუბარი და განსაკუთრებული პატივისცემა. ეს არის ეკრანის გარჩევადობის ყველაზე ფართო ტიპები.

bootstrap საპასუხო დიზაინი

ადაპტირებადი განლაგების შესაქმნელად ჩატვირთვის გამოყენება მართლაც მარტივია. ამის მოხერხებულობა არის ბლოკების, ღილაკების, მაგიდების და ა.შ. ადაპტაციის სტილი. უკვე დარეგისტრირებულია bootstpap-ში. საჭიროა მხოლოდ განიხილოს რომელი კლასი რომელ ელემენტს მივაკუთვნოთ.

დასაწყებად, ჩამოტვირთეთ bootstrap-ის უახლესი ვერსია და დააკავშირეთ იგი თქვენს ვებსაიტზე. გთხოვთ გაითვალისწინოთ, რომ სტილებისა და სკრიპტების კავშირს WordPress-თან აქვს თავისი თავისებურებები.

ჩატვირთვის განლაგება მრავალფეროვანია იმით, რომ ბლოკისა და ეკრანის სიგანე დაყოფილია 12 თანაბარ ნაწილად. და ბლოკის კლასიდან გამომდინარე, შეგიძლიათ დააყენოთ ბლოკის სიგანე, რომელიც შეესაბამება ნაწილების საჭირო რაოდენობას.

მაგალითად, ეს დიზაინი საშუალებას გაძლევთ იხილოთ ერთი ფართო ბლოკი შინაარსისთვის 8 ნაწილის სიგანეზე და ერთი ვიწრო ბლოკი გვერდითი ზოლისთვის, ეკრანის 4 ნაწილის სიგანეზე:

ბლოკების სიგანე ავტომატურად დარეგულირდება ეკრანის სიგანის მიხედვით. მობილურ მოწყობილობაზე ნახვისას ბლოკები ერთმანეთის მიყოლებით გადაინაცვლებს.

თქვენ ასევე შეგიძლიათ დაარეგულიროთ ბლოკზე წვდომა კიდეზე, ისევ, ნაწილების საჭირო რაოდენობის მიხედვით. მაგალითად, ეს არის დიზაინი:

შეიქმნება ბლოკი 10 ნაწილის სიგანით, ეკრანის 1 ნაწილის მარცხენა შესასვლელით.

თუ გათხოვდები, მაშინ ბოტსტრაპიანი რობოტი მოუწევს რობოტს შვიდკასთან ბრძოლა. რამდენად სწორად მუშაობს ეს სტილები და საიტზე ცუდი არაფერი იქნება.

უახლოეს მომავალში ვგეგმავ არაერთი რობოტის გაკვეთილის ჩატარებას bootsrap-ით. იმ რაჟამს, რომ ეს წამი არ დაკარგო.

ვებსაიტის ადაპტაციის შემოწმება

როდესაც საკვები მოდის: როგორ შევამოწმოთ ვებსაიტის ადაპტირება? თქვენ დაწერეთ მედია ღერძი CSS-ში, ჩართეთ bootstrap და შეარჩიეთ საჭირო კლასები. როგორც ხედავთ, საიტი სწორად ადაპტირდება ეკრანის ყველა ზომაზე.

კიდევ უფრო ზუსტი და უხეში უფასო მომსახურება, რომელიც იმსახურებს დიდ დაფასებას ვებ ოსტატებისა და განლაგების დიზაინერებისგან, რომლებიც ეხება ვებსაიტების ადაპტირებულ განლაგებას.

როგორ მოგწონთ ქანდაკება? გაირკვა ყველაფერი? თუ არადა დაწერეთ კომენტარებში, მაშინვე მოვაგვარებთ.

ასე რომ, თქვენი ვებსაიტის ადაპტური დიზაინის შესაქმნელად, ფრთხილად უნდა იყოთ. სწორედ ამიტომ უნდა ვისაუბროთ ჭკვიან ინსტალაციაზე თქვენი საიტისთვის, საძიებო სისტემებისთვის და რაც მთავარია თქვენი საიტისთვის.

გამხდარი სმარტფონის ერთ-ერთი მთავარი პარამეტრი არის ეკრანის გამოყოფა. მოდით გაერკვნენ, რა არის ეს და რატომ არის ეს ასე მნიშვნელოვანი.

რა არის ეკრანის განცალკევება?

ეკრანის სიგანე არის მნიშვნელობა, რომელიც მიუთითებს ეკრანზე სიგანის გარდა პიქსელების რაოდენობაზე. ეს პარამეტრი მნიშვნელოვანია, რადგან ის გავლენას ახდენს კანის სმარტფონის გამოსახულების სიცხადეზე.

ეკრანის განცალკევება ხელს უწყობს გამოსახულების სიცხადეს. რაც უფრო დიდია ის, მით უფრო მკაფიო და ნათელი იქნება გამოსახულება. თუ მოწყობილობა დიდი ზომისაა, მაგრამ აქვს პატარა განყოფილება, მაშინ პიქსელები გამოჩნდება პატარა მოწყობილობაზე. ნომრები და სიმბოლოები გამოჩნდება არასაკმარისად მკაფიო და, ზოგიერთ შემთხვევაში, დაკბილული, როგორც ძველ ტელეფონებზე.

ჩართულია ნარაზი 99 ასეულ სმარტფონს აქვს სამი ტიპის ეკრანი

• HD (1280x720, 720p);
• Full HD (1920×1080, 1080p);
• Quad HD (2560x1440, 1440p).

რა არის სხვადასხვა ტიპის შერჩევის ეკრანები?

Ერთ - ერთი მათგანი პოპულარული ნებართვებისმარტფონის დისპლეი არის 1280 x 720 პიქსელი - HD. ბიუჯეტის ფასების სეგმენტის გაჯეტების უმეტესობა აღჭურვილია ასეთი დისპლეით.

უფრო დიდ მოწყობილობებს აქვთ დისპლეი უფრო დიდი განცალკევებით. 1920-1080 წლების ეკრანიანი სმარტფონები დიდი ხნის წინ გამოჩნდა და აღარავის აოცებს. თუ სმარტფონის დიაგონალი ხდება 4,5-დან 5,5 ინჩამდე, საუკეთესოდ შეეფერება 1920x1080 პიქსელიანი ეკრანი (Full HD). გამოსახულებული პიქსელების ნაკლები განცალკევებით, შეიძლება განიცადოთ დისკომფორტი. საგალობელი, ეს არის ოქროს შუალედი - ფასები დაბალია, სურათები ნათელი და ნათელი.

5,5 ინჩზე მეტი დიაგონალით, ფლაგმანურ მოწყობილობებს აქვთ ცალკე Quad HD დისპლეი (2650×1440). გამოსახულების სიცხადე აქ მაღალია, მაგრამ, დამიჯერეთ, ადამიანის თვალი პრაქტიკულად ვერ ამჩნევს არსებულ განსხვავებას. Quad HD არის ახალი ფუნქცია, რომელიც საჭიროა გაფართოებული რეალობისა და ვირტუალური რეალობის ტექნოლოგიებისთვის.