Ինչպե՞ս ստեղծել կայքի մոբայլ-տարբերակը (առանց պլագինի !!!)

Այսօր մեր կյանքն ու առօրյան դարձել են «բջջային»: Նկատի չունեմ միայն զանգելը, զանգերը կամ SMS-ները, այլ՝ բջջային ինտերնետից օգտվելը:

Ինչ խոսք, որ դեսկթոփից հարմար բան չկա (գոնե՝ ինձ համար): Սակայն երբեմն ստիպված ես լինում ինտերնետից օգտվել բջջային հեռախոսիդ կամ սմարտֆոնիդ միջոցով: Ուստի կայքի բջջային տարբերակ ունենալը դարձել է ոչ թե ցանկալի մի բան, այլ՝ անհրաժեշտություն:

Երբ ամիսներ առաջ ես փոխեցի բլոգի դիզայնը, լրիվ մոռացել էի բջջային տարբերակը թարմացնելու մասին: Եվ, մի քանի օր առաջ կայքի այցելուներից մեկից՝ Ռուբենից ստացա այս նամակը (շնորհակալություն նրան):

Բարև Ձեզ, նախ ցանկանում եմ շնորհակալություն հայտնել Ձեզ՝ գրքերի համար։ Եվ մի հարց՝ Ձեր կայքը չունի՞ հեռախոսային տարբերակ… Սենց բավականին անհարմար է։

Եվ ես հիշեցի ու վերականգնեցի e-armenians.com-ի մոբայլ-տարբերակը: Սակայն դա արեցի ոչ թե պլագինի, այլ՝ CSS-ի միջոցով:

Ասեմ անմիջապես, որ այսպիսի մեթոդը գործում է ոչ միայն վորդպրեսի, այլ ցանկացած հարթակի և կայքի պարագայում:

Նկարագրածս մեթոդը բավականին հեշտ է և կազմված է երկու փուլից:

• Քայլ 1. Ստեղծում ենք կայքի բջջային տարբերակի ոճային դրույթները սահմանող CSS ֆայլ:
• Քայլ 2. Կայքէջի HEAD-ում ավելացնում ենք 1 տող՝ որով բջջային հեռախոսներով կայքը դիտելիս հղում ենք ավելացնում դեպի մեր իսկ ստեղծած և սերվեր վերբեռնած CSS ֆայլը:

Քայլ #1. Մոբայլ CSS-ի ստեղծում

Այս փուլում մենք ստեղծում ենք CSS ֆայլ (օրինակ՝ mobile.css կամ iphone.css), որի միջոցով էլ սահմանում ենք մեր կայքի բջջային տարբերակի ոճային դրույթները:

Նախ պետք է դիտել ձեր կայքէջի HTML կոդերը և հասկանալ, թե էջի որ մասն եք ցանկանում, որպեսզի բջջային տարբերակում չցուցադրվի, կամ, եթե ցուցադրվելու է, ապա պետք է սահմանել բջջային չափսերի, գույների և այլ պարամետրերի css-դրույթները:

Օրինակ, ինքս բջջային տարբերակից հեռացրել եմ էջի ֆութերը և աջ-կողմնային սյունակը, և դա արել եմ հետևյալ կերպ:

#footer, #sidebar {
display: none;
}

Այստեղ տարբերակները տարբերվելու են՝ կախված ձեր նախասիրություններից: Բոլոր դեպքերում, ձեզանից կպահանջվի CSS-կոդավորման տարրական գիտելիքներ ու հմտություններ:

Քայլ #2. Հղում դեպի մոբայլ CSS-ը

Ձեր կայքէջի HTML կոդերում, HEAD-ում ավելացրեք այս տողը:

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

(Չմոռանաք «link_to_your_css-ը»-ը փոխարինել 1-ին փուլում ստեղծած css ֆայլի հղումով):

Այս տողի իմաստը հետևյալն է. երբ կայքէջը բացվի մինչև 480px լայնության screen ունեցող սարքերով (այսինքն՝ բջջայիններով), ապա կայքի համար կգործի ոչ թե հիմնական, այլ 1-ին փուլում ստեղծած css-հրահանգները:

Մի կարևոր նկատառում. HEAD-ում այս տողն ավելացրեք հիմնական css-ֆայլերից ՀԵՏՈ (և ոչ թե դրանցից առաջ):

Բոնուս. այլ հնարավորություններ

Ինքս չեմ օգտագործել, սակայն կան նաև ավելի սպեցիֆիկ և նպատակաուղղված մեթոդներ: Ահա մի քանի օրինակ:

Բոնուս #1. Հին արտադրության բջջայիններ

Հին արտադրության բջջայինների համար 2-րդ փուլում ներկայացված կոդերում ավելացնում ենք «handheld» բառը:

<link media="handheld, only screen and (max-device-width: 480px)" href="link_to_your_css" type="text/css" rel="stylesheet" />

Բոնուս #2. iPhone 4 և iPad touch 4G

HEAD-ում ավելացվող տողը պետք է լինի այսպիսին:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="link_to_your_css" />

Բոնուս #3. Մեկփուլանի մեթոդ (բավարարվում ենք միայն 1-ին փուլով)

Ձեր հիմնական CSS-ում ավելացրեք այսպիսի տողեր, որոնց { և }-ի միջև պետք է գրել ձեր բջջային տարբերակի ոճային դրույթները:

@media only screen and (max-width: 480px) {
/* Ձեր CSS-ը գրեք այստեղ, որը կազդի միայն մոբայլ-տարբերակի վրա*/
}

Ինչպես նշված է ենթավերնագրում, HEAD-ում որևէ տող ավելացնելու անհրաժեշտությունը վերանում է:

…

Ահա այսքանը: Հուսով եմ, որ հետաքրքրեց:

Մեկնաբանությունների մասին էլ չասեմ: Փորձեք նշածս մեթոդներն ու արտահայտվեք ազատորեն:

Աղբյուրը՝ e-armenians.com

Պիտակներ. բջջային, կայքի ձեւավորում, վեբ դիզայն

Հեղինակի մասին
Ողջույն, ես այս բլոգի հեղինակն եմ: Ուրախ կլինեմ, եթե դուք բաժանորդագրվեք բլոգի գրառումներին և ընթերցեք իմ էլ. գրքերը:
Մեր բլոգում Artur-ը գրել է 583 հոդված: